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	每次翘板开关改变时触发。

---

官网：https://github.com/DannyFeliz/vue-rocker-switch

演示：https://www.vue365.cn/code_demo.php?id=716

GitHub下载：https://github.com/DannyFeliz/vue-rocker-switch/archive/master.zip