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

基本用法

绑定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. Delphi 子界类型

  2. optparse:让你轻松地与命令行打交道

    介绍 一个专门用于命令行参数解析的模块 使用 import optparse op = optparse.OptionParser() # 添加选项 op.add_option("--s&q ...

  3. 修正zen cart商品评论显示太短的问题

    找到includes\modules\pages\product_reviews\header_php.php $reviews_query_raw = “SELECT r.reviews_id, l ...

  4. JavaWEB开发02——CSS&JS

    今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...

  5. 【leetcode】Department Top Three Salaries

    The Employee table holds all employees. Every employee has an Id, and there is also a column for the ...

  6. springboot整合admin管理平台

    server 端 <parent> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  7. Windows环境下MySQL面试技巧

    对话一: 面试官:重新安装mysql卡在最后一步,怎么解决? 应聘者:第一次安装完mysql,由于各种原因需要重新安装是经常遇到的问题,解决方案如下.              1)在注册表里搜索my ...

  8. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  9. AngularJS基础语法

    1.ng-app 决定了angularjs的作用域范围,你可以如下使用: <html ng-app> … </html> 来让angularjs渲染整个页面,也可以使用 < ...

  10. UVA 10900 So do you want to be a 2^n-aire?

    #include<bits/stdc++.h> #include<stdio.h> #include<iostream> #include<cmath> ...