插件名称 | vue-toggle-btn |
---|---|
发布时间 | 2021年4月29日 |
插件作者 | JonathanDn |
Vue.js切换按钮-动态的,完全可自定义的切换按钮,也称为切换开关。
options
是一个完整的配置对象,其中包含handle
, track
和的切换按钮构建块。isActive
property | 类型 | 描述 |
---|---|---|
options | object | 保留所有切换按钮样式的配置 |
isActive | false | 保持按钮的当前布尔状态-可以为false 或true |
handle | object | 拥有所有手柄样式的配置 |
track | object | 拥有所有轨道风格的配置 |
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>