Vue.js的可定制翘板开关组件-CSDN博客

Vue摇杆开关 (vue-rocker-switch)

A customizable rocker switch component for Vue.js.

Vue.js的可定制翘板开关组件。

安装 (Installation)

npm install vue-rocker-switch --save

使用范例 (Usage example)

<template>
  <RockerSwitch />
</template>

<script>
// Import package
import RockerSwitch from "vue-rocker-switch";
// Import styles
import "vue-rocker-switch/dist/vue-rocker-switch.css";

export default {
  name: "App",
  components: {
    RockerSwitch
  }
};
</script>

道具 (Props)

Prop	Description	Default value	Type
value	Boolean value attached to the rocker switcher. This will be used to initialize the component value too.	`false`	Boolean
size	rocker switch size, it can be a string (`small`, `medium` and `large`) or a decimal number	`small`	String or Number
labelOn	Text of the `On` label	`On`	String or Number
labelOff	Text of the `Off` label	`Off`	String or Number
activeColorLabel	Text color used when the `On` label is active	`#fff`	String
inactiveColorLabel	Text color used when the `Off` label is inactive	`#333`	String
backgroundColorOn	Background color of the `On` button	`#0084d0`	String
backgroundColorOff	Background color of the `Off` button	`#bd5757`	String
borderColor	Border color of the rocker switch	`#eee`	String
toggle	Allow to the rocker switch to behave as a toggle switch	`true`	Boolean

Struts	描述	默认值	类型
值	附加到翘板开关的布尔值。这也将用于初始化组件值。	`false`	布尔型
尺寸	翘板开关大小，可以是字符串( `small` ， `medium`和`large` )或十进制数	`small`	字符串或数字
labelOn	该文本`On`标签	`On`	字符串或数字
labelOff	`Off`标签的文字	`Off`	字符串或数字
activeColorLabel	启用“ `On`标签时使用的文本颜色	`#fff`	串
inactiveColorLabel	“ `Off`标签处于非活动状态时使用的文本颜色	`#333`	串
backgroundColorOn	`On`按钮的背景颜色	`#0084d0`	串
backgroundColorOff	“ `Off`按钮的背景颜色	`#bd5757`	串
边框颜色	翘板开关的边框颜色	`#eee`	串
拨动	允许翘板开关充当拨动开关	`true`	布尔型