Vue.js翘板开关组件 - vue-rocker-switch

插件名称	vue-rocker-switch
发布时间	2020年5月26日
插件作者	DannyFeliz

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

安装和下载：

# NPM
$ npm install vue-rocker-switch --save

使用

<template>
  <RockerSwitch />
</template>

<script>
// 导入package
import RockerSwitch from "vue-rocker-switch";
// 导入样式
import "vue-rocker-switch/dist/vue-rocker-switch.css";

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

Props

Prop	描述	默认值	类型
value	附加到翘板开关的布尔值。这也将用于初始化组件值。	`false`	Boolean
size	摇臂开关的大小，它可以是一个字符串（`small`，`medium`和`large`）或十进制数	`small`	String or Number
labelOn	`On`标签文字	`On`	String or Number
labelOff	`Off` 标签文字	`Off`	String or Number
activeColorLabel	`On` 标签处于活动状态时使用的文本颜色	`#fff`	String
inactiveColorLabel	`Off` 标签无效时使用的文字颜色	`#333`	String
backgroundColorOn	`On` 按钮的背景色	`#0084d0`	String
backgroundColorOff	`Off` 按钮的背景色	`#bd5757`	String
borderColor	翘板开关的边框颜色	`#eee`	String
toggle	允许翘板开关充当拨动开关	`true`	Boolean

事件

事件	描述
change	每次翘板开关改变时触发。