012_Switch开关

1. Switch开关

1.1. 表示两种相互对立的状态间的切换, 多用于触发「开/关」。

1.2. 开关属性

参数	说明	类型	默认值
value / v-model	绑定值	boolean / string / number	无
disabled	是否禁用	boolean	false
width	switch的宽度(像素)	number	40
active-icon-class	switch打开时所显示图标的类名, 设置此项会忽略active-text	string	无
inactive-icon-class	switch关闭时所显示图标的类名, 设置此项会忽略inactive-text	string	无
active-text	switch打开时的文字描述	string	无
inactive-text	switch关闭时的文字描述	string	无
active-value	switch打开时的值	boolean / string / number	true
inactive-value	switch关闭时的值	boolean / string / number	false
active-color	switch打开时的背景色	string	#409EFF
inactive-color	switch关闭时的背景色	string	#C0CCDA
name	switch对应的name属性	string	无
validate-event	改变switch状态时是否触发表单的校验	boolean	true

1.3. 开关事件

事件名称	说明	回调参数
change	switch状态发生变化时的回调函数	新状态的值

1.4. 开关方法

方法名	说明
focus	使Switch获取焦点

2. Switch开关例子

2.1. 使用脚手架新建一个名为element-ui-switch的前端项目, 同时安装Element插件。

2.2. 编写App.vue

<template><div id="app"><h1>基本用法</h1><h4>绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。</h4><el-switch v-model="base_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch><h1>文字描述</h1><h4>使用active-text属性与inactive-text属性来设置开关的文字描述。</h4><el-switch v-model="text_value1" active-text="按月付费" inactive-text="按年付费" @change="handleChange"></el-switch><el-switch style="display: block" v-model="text_value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"></el-switch><h1>扩展的value类型</h1><h4>设置active-value和inactive-value属性, 接受Boolean、String或Number类型的值。</h4><el-tooltip :content="'Switch value: ' + ext_value" placement="top"><el-switch v-model="ext_value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"></el-switch></el-tooltip><h1>禁用状态</h1><h4>设置disabled属性, 接受一个Boolean, 设置true即可禁用。</h4><el-switch v-model="disabled_value1" disabled></el-switch><el-switch v-model="disabled_value2" disabled></el-switch></div>
</template><script>
export default {data () {return {base_value: true,text_value1: true,text_value2: true,ext_value: '100',disabled_value1: true,disabled_value2: false}},methods: {handleChange (val) {console.log(val)}}
}
</script>

2.3. 运行项目

012_Switch开关相关推荐

开关面板如何自己印字_如何自己动手做一个智能开关
现在的智能家居这么火,对于想自己动手的小伙伴们来说,都想自己去做一些家里使用的智设备.现在的中国不缺卖唱卖惨的,缺的是能动手创造一些能实际使用的而不是哗众取宠的人,天天喊着要反击外国技术封锁.那么我 ...
javascript开关_JavaScript开关案例简介
javascript开关 In this short article, I will introduce you to JavaScript switch cases and how to use t ...
多键开关 android8.0,手机桌面多键开关(SwitchPro Widget )
7键开关SwitchPro Widget 是款主屏幕窗口小部件工具,可用于开启/关闭多种系统功能,支持多种自定义设置,比原生的电量控制开关好用很多. 7键开关SwitchPro Widget并非只有7 ...
ansys大变形开关要不要打开_ANSYS不收敛问题的解决办法
笔者应聘时发现此公众号内容也备受同行专家认可, 继续努力,再接再厉! 本文经验是基于仿真秀专家学者总结,在此感谢仿真秀的支持与鼓励. 80%的线性不收敛都是因为接触问题!!! 一.材料问题的不收敛可以 ...
Matlab编程与数据类型 -- 开关语句switch/end
本微信图文详细介绍了Matlab中switch/end开关语句.
九、将cs文件快速的转换成可执行文件和响应文件(配置编译开关的文件)
1.将包含多个类型的源代码文件转换为可以部署的文件.有如下Program.cs的文件,代码如下: public sealed class Program{public static void Main ...
77底盒和86底盒的区别_86型开关底盒的具体参数
展开全部 86型开关底盒参数: 1. 标准尺寸:86毫米62616964757a686964616fe4b893e5b19e31333365663533*86毫米. 2.安装孔中心距 60毫米. 2. ...
上线稳定性如何保证？开关编程很有用
在日常工作中,无论是一周一个迭代,还是两周一个迭代,都避免不了上线的环节.唯一的区别就是上线的频次不同而已.那么我们如何保证在这么高频次的发版里面同时保证稳定性呢? 答案就是开关编程,所谓的开关编程其 ...
漫画：骚操作系列（灯泡开关的经典面试题）
来自:小浩算法昨天的排版简直逊爆了,让我很不满意!小浩作为一个处女座,追求完美是必须的.所以呢,今天的文章进行了多次的审阅才发出(当然,如果大家还觉得很丑.那我也只能再继续努力.毕竟我不是一个专业的 ...

012_Switch开关

012_Switch开关相关推荐

最新文章

热门文章