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

基本用法

绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

 <el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch> <script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>

文字描述

使用active-text属性与inactive-text属性来设置开关的文字描述。

<el-switch
v-model="value3"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<el-switch
style="display: block"
v-model="value4"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch> <script>
export default {
data() {
return {
value3: true,
value4: true
}
}
};
</script>

扩展的 value 类型

设置active-valueinactive-value属性,接受BooleanStringNumber类型的值。

 <el-tooltip :content="'Switch value: ' + value5" placement="top">
<el-switch
v-model="value5"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip> <script>
export default {
data() {
return {
value5: '100'
}
}
};
</script>

禁用状态

设置disabled属性,接受一个Boolean,设置true即可禁用。

 <el-switch
v-model="value6"
disabled>
</el-switch>
<el-switch
v-model="value7"
disabled>
</el-switch>
<script>
export default {
data() {
return {
value6: true,
value7: false
}
}
};
</script>

Attributes

参数 说明 类型 可选值 默认值
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

Events

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

Methods

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

Switch 开关的更多相关文章

  1. 自定义switch开关

    自定义一个switch开关 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. mui的switch开关的应用

    HTML: <!--mui的switch开关--> <div class="mui-content-padded"> <h5>switch开关m ...

  3. CSS做一个Switch开关

    本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...

  4. 使用css3 制作switch开关

    使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...

  5. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  6. elementui switch 开关,点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  7. 微信小程序 主题皮肤切换(switch开关)

    示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

  8. mui switch(开关)里面token不能及时更新

    做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...

  9. layui switch 开关监听 弹出确定状态转换

    不废话,直接上图: 原始状态:   点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head& ...

  10. mui switch 开关js控制打开 & Cannot read property 'toggle' of null

    //打开开关 mui('#mySwitch').switch().toggle(); //小开关打开异常的情况解决办法$(".mui-switch-handle").attr(&q ...

随机推荐

  1. IDEA修改Maven全局配置

    在使用过程中发现,IDEA每次新建一个Project ,这个maven配置都会初始化默认的. 这里需要设置下全局配置: File -> Other Settings -> Settings ...

  2. Linu目录结构和创建用户

    具体目标结构 ./bin [重点] (/usr/bin./usr/local/bin) ●是Binary的速写,这个目录存放着最经常使用的命令. ./sbin (/usr/sbin./usr/loca ...

  3. Linux下部署Kafka分布式集群,安装与测试

    注意:部署Kafka之前先部署环境JAVA.Zookeeper 准备三台CentOS_6.5_x64服务器,分别是:IP: 192.168.0.249 dbTest249 Kafka IP: 192. ...

  4. Boston Key Party 2015 Heath Street 题解(Writeup)

    Heath Street是Boston Key Party 2015的一道数字取证题目,我们得到了一个叫做“secretArchive.6303dd5dbddb15ca9c4307d0291f77f4 ...

  5. golang 结构体嵌入和匿名成员

    考虑一个二维的绘图程序,提供了一个各种图形的库,例如矩形.椭圆形.星形和轮形等几 何形状.这里是其中两个的定义 type Circle struct { X, Y, Radius int } type ...

  6. 个人小应用服务器安装搭建,HP 360p Gen9 使用winpe安装centos[一]

    以前用aws的时候使用的ec2, 里面可选的windows server搭配umbraco的cms做了自己的个人网站,主要是当年项目需要,使用aws,我也办了国际币种卡,在组里各种联系亚马逊开服务,后 ...

  7. Django学习系列13:Django ORM和第一个模型

    ORM—对象关系映射器,是一个数据抽象层,描述存储在数据库中的表,行和列.处理数据库时,可以使用熟悉的面向对象方式,写出更好的代码. 在ORM的概念中,类对应数据库中的表,属性对应列,类的单个实例表示 ...

  8. 组件(2):使用Prop下发数据

    数据下发 组件实例的作用域是相互独立的,父.子组件之间无法进行数据的共享.如果想在子组件模板中使用父组件的数据,可以通过Prop将父组件的数据下发到子组件.子组件用props选项声明它预期的数据. 为 ...

  9. Mac 安装RN android开发环境

    前言 前面介绍了MAC 安装,再来讲讲mac 安装 安卓的开发环境 首先貌似很多Mac自带安卓JDK ,你可以在终端上输入java -version 看是否已经有java开发环境. 如果没有java开 ...

  10. hiho #1038 : 01背包 (dp)

    #1038 : 01背包 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励 ...