vue Switch状态切换组件

vue项目开发时，要使用Switch来切换状态，但是常用的element ui的Switch并不能满足需要，只能在github上查找一个符合要求的组件来用。最终找到了一个自己需要的组件。

安装依赖

npm install vue-js-toggle-button --save

引入

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
或者
import { ToggleButton } from 'vue-js-toggle-button'
Vue.component('ToggleButton', ToggleButton)

使用

<toggle-button @change="onChangeEventHandler"/>

<toggle-button v-model="myDataVariable"/>

<toggle-button :value="false"
               color="#82C7EB"
               :sync="true"
               :labels="true"/>

<toggle-button :value="true"
               :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

说明文档

姓名	类型	默认	描述
value	布尔值	false	切换按钮的初始状态
sync	布尔值	false	如果设置为true, 将观察属性的变化并在prop 发生变化value时覆盖按钮的当前状态value
speed	数字	300	动画的过渡时间
disabled	布尔值	false	按钮对鼠标事件没有反应
color	[字符串，对象]	#75C791	If String- 选中时按钮的颜色If Object- 选中/未选中或禁用时按钮的颜色示例：{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
css-colors	布尔值	false	If true- 通过内联样式停用颜色设置，转而使用 CSS 样式
labels	[布尔，对象]	false	If Boolean- 显示/隐藏默认标签（“on”和“off”）If Object- 为两种状态设置自定义标签。例子：{checked: 'Foo', unchecked: 'Bar'}
switch-color	[字符串，对象]	#BFCBD9	If String- 选中时开关的颜色或背景属性If Object- 选中/未选中时开关的颜色或背景属性示例：{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
width	数字	50	按钮宽度
height	数字	22	按钮高度
margin	数字	3	开关和背景边框之间的空间
name	细绳	undefined	附加到生成的输入字段的名称
font-size	数字	undefined	字体大小

组件演示

github地址

Switch状态切换组件