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

特性

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

property	类型	描述
options	object	保留所有切换按钮样式的配置
isActive	false	保持按钮的当前布尔状态-可以为false或true
handle	object	拥有所有手柄样式的配置
track	object	拥有所有轨道风格的配置

handle

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

track

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>

---

官网：https://github.com/JonathanDn/vue-toggle-btn

GitHub下载：https://github.com/JonathanDn/vue-toggle-btn/archive/refs/heads/master.zip