Vue的高度可定制的切换/开关按钮组件 - vue-toggle-btn

Vue.js切换按钮-动态的，完全可自定义的切换按钮，也称为切换开关。

特性

options是一个完整的配置对象，其中包含handle， track和的切换按钮构建块。isActive

property	类型	默认	描述
diameter	number	30	设置手柄直径（圆形按钮移动）
color	string	`#fff`	设置手柄颜色
borderRadius	string	`50%`	设置手柄边框半径

property	类型	默认	描述
width	number	70	设置轨道宽度
height	number	30	设置轨道高度
color	string	`#ccc`	设置默认轨道颜色
activeColor	string	`#2196F3`	设置活动状态轨道的颜色（切换后）
borderWidth	number	0	设置轨道边框宽度
borderRadius	string	`34px`	设置轨道边界半径

通过NPM安装

npm i vue-toggle-btn

然后在您的项目中要求：

var VueToggleBtn = require('vue-toggle-btn');

或ES6语法：

import VueToggleBtn from 'vue-toggle-btn';

然后，您可以全局注册该组件：

Vue.component('vue-toggle-btn', VueToggleBtn);

或在您的Vue组件中：

components: {
  ToggleBtn
}

然后，您可以在项目中的任何地方使用以下选择器：

<vue-toggle-btn></vue-toggle-btn>

活动名称	返回	描述
setIsActive	`isActive`	单击切换按钮将发出其当前的`isActive`布尔状态

收听事件，例如：

<vue-toggle-btn @isActive="myLocalSetterFunction($event)"></vue-toggle-btn>