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

您所在的位置：网站首页 › vue实现按钮切换 › Vue的高度可定制的切换/开关按钮组件

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

2022-05-09 20:23| 来源: 网络整理| 查看: 265

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

特性

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

property类型描述optionsobject保留所有切换按钮样式的配置isActivefalse保持按钮的当前布尔状态-可以为false或truehandleobject拥有所有手柄样式的配置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 }

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

为了快速启动和运行，该软件包现在支持仅渲染具有默认值的选择器事记活动名称返回描述setIsActiveisActive单击切换按钮将发出其当前的isActive布尔状态

收听事件，例如：

【本文地址】

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

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

今日新闻

推荐新闻