Switch 开关
表示两种相互对立的状态间的切换,多用于触发「开/关」。
基本用法
绑定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-value
和inactive-value
属性,接受Boolean
, String
或Number
类型的值。
<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 开关的更多相关文章
- 自定义switch开关
自定义一个switch开关 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- mui的switch开关的应用
HTML: <!--mui的switch开关--> <div class="mui-content-padded"> <h5>switch开关m ...
- CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
- 使用css3 制作switch开关
使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...
- 微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- elementui switch 开关,点击确认按钮后在进行开关
<el-table-column label="上头条" align="center"> <template slot-scope=" ...
- 微信小程序 主题皮肤切换(switch开关)
示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...
- mui switch(开关)里面token不能及时更新
做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...
- layui switch 开关监听 弹出确定状态转换
不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head& ...
- mui switch 开关js控制打开 & Cannot read property 'toggle' of null
//打开开关 mui('#mySwitch').switch().toggle(); //小开关打开异常的情况解决办法$(".mui-switch-handle").attr(&q ...
随机推荐
- Delphi 子界类型
- optparse:让你轻松地与命令行打交道
介绍 一个专门用于命令行参数解析的模块 使用 import optparse op = optparse.OptionParser() # 添加选项 op.add_option("--s&q ...
- 修正zen cart商品评论显示太短的问题
找到includes\modules\pages\product_reviews\header_php.php $reviews_query_raw = “SELECT r.reviews_id, l ...
- JavaWEB开发02——CSS&JS
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...
- 【leetcode】Department Top Three Salaries
The Employee table holds all employees. Every employee has an Id, and there is also a column for the ...
- springboot整合admin管理平台
server 端 <parent> <groupId>org.springframework.boot</groupId> <artifactId>sp ...
- Windows环境下MySQL面试技巧
对话一: 面试官:重新安装mysql卡在最后一步,怎么解决? 应聘者:第一次安装完mysql,由于各种原因需要重新安装是经常遇到的问题,解决方案如下. 1)在注册表里搜索my ...
- HTML+CSS之光标悬停图片翻转效果
设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...
- AngularJS基础语法
1.ng-app 决定了angularjs的作用域范围,你可以如下使用: <html ng-app> … </html> 来让angularjs渲染整个页面,也可以使用 < ...
- UVA 10900 So do you want to be a 2^n-aire?
#include<bits/stdc++.h> #include<stdio.h> #include<iostream> #include<cmath> ...