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

Vue的高度可定制的切换/开关按钮组件 - vue-toggle-btn
插件名称 vue-toggle-btn
发布时间 2021年4月29日
插件作者 JonathanDn

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

特性

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

property类型描述
optionsobject保留所有切换按钮样式的配置
isActivefalse保持按钮的当前布尔状态-可以为falsetrue
handleobject拥有所有手柄样式的配置
trackobject拥有所有轨道风格的配置

handle

property类型默认描述
diameternumber30设置手柄直径(圆形按钮移动)
colorstring#fff设置手柄颜色
borderRadiusstring50%设置手柄边框半径

track

property类型默认描述
widthnumber70设置轨道宽度
heightnumber30设置轨道高度
colorstring#ccc设置默认轨道颜色
activeColorstring#2196F3设置活动状态轨道的颜色(切换后)
borderWidthnumber0设置轨道边框宽度
borderRadiusstring34px设置轨道边界半径

用法

通过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>

事记

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

收听事件,例如:

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