element-ui switch 组件源码分享

今日简单分享 switch 组件源码,主要从以下四个方面来分享:

1、switch 组件的页面结构

2、switch 组件的属性

3、switch 组件的事件

4、switch 组件的方法

一、switch 组件的页面结构

二、switch 组件的属性

2.1 value / v-model 属性,绑定值,类型 boolean / string / number,无默认值。

2.2 disabled 属性,是否禁用,类型 boolean,默认 false。

2.3 width 属性,switch 的宽度(像素),类型 number,默认 40。

2.4 active-icon-class 属性,switch 打开时所显示图标的类名,设置此项会忽略 active-text类型

string,无默认值。

2.5 inactive-icon-class 属性,switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text,类型 string,无默认值。

2.6 active-text 属性,switch 打开时的文字描述,类型 string,无默认值。

2.7 inactive-text 属性,switch 关闭时的文字描述,类型 string,无默认值。

2.8 active-value 属性,switch 打开时的值,类型 boolean / string / number,默认 true。

2.9 inactive-value 属性,switch 关闭时的值,类型 boolean / string / number,默认 false。

2.10 active-color 属性,switch 打开时的背景色,类型 string,默认 #409EFF。

2.11 inactive-color 属性,switch 关闭时的背景色,类型 string,默认 #C0CCDA。

2.12 name 属性,switch 对应的 name 属性,类型 string,无默认值。

2.14 validate-event 属性,改变 switch 状态时是否触发表单的校验,类型 boolean,默认 true。

三、switch 组件的事件

3.1 change 事件,switch 状态发生变化时的回调函数,新状态的值。

四、switch 组件的方法

4.1 focus 事件,使 Switch 获取焦点。

相关推荐
天才测试猿4 小时前
Pytest+selenium UI自动化测试实战实例
自动化测试·软件测试·python·selenium·测试工具·ui·pytest
初九之潜龙勿用12 小时前
C#结合html2canvas生成切割图片并导出到PDF
开发语言·ui·pdf·c#·html·asp.net
枫叶丹42 天前
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
ui·华为od·华为·华为云·harmonyos
xcLeigh2 天前
WPF进阶 | WPF 样式与模板:打造个性化用户界面的利器
ui·c#·wpf
撸码到无法自拔3 天前
Axure PR 9 动效 设计&交互
ui·交互·axure·photoshop
老马啸西风3 天前
IM 即时通讯系统-50-[特殊字符]cim(cross IM) 适用于开发者的分布式即时通讯系统
java·分布式·ui·开源·im
struggle20254 天前
helm-dashboard为Helm设计的缺失用户界面 - 可视化您的发布,它提供了一种基于UI的方式来查看已安装的Helm图表
开发语言·ui·计算机视觉·编辑器·知识图谱
黑金IT4 天前
Python3 + Qt5:实现AJAX异步更新UI
qt·ui·ajax
喵叔哟4 天前
5. 【Vue实战--孢子记账--Web 版开发】-- 主页UI
前端·vue.js·ui
山海青风5 天前
Axure入门教程 -- 第五章:原型优化与调试
ui·交互·axure