Switch 开关
编辑教程Switch 开关
引入
import Vue from 'vue';
import { Switch } from 'vant';
Vue.use(Switch);
代码演示
基础用法
通过v-model绑定开关的选中状态,true表示开,false表示关
<van-switch v-model="checked" />
export default {
data() {
return {
checked: true
};
}
};
禁用状态
通过disabled属性来禁用开关,禁用状态下开关不可点击
<van-switch v-model="checked" disabled />
加载状态
通过loading属性设置开关为加载状态,加载状态下开关不可点击
<van-switch v-model="checked" loading />
自定义大小
通过size属性自定义开关的大小
<van-switch v-model="checked" size="24px" />
自定义颜色
active-color属性表示打开时的背景色,inactive-color表示关闭时的背景色
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
异步控制
需要异步控制开关时,可以使用value属性和input事件代替v-model,并在input事件回调函数中手动处理开关状态
<van-switch :value="checked" @input="onInput" />
export default {
data() {
return {
checked: true
};
},
methods: {
onInput(checked) {
Dialog.confirm({
title: '提醒',
message: '是否切换开关?'
}).then(() => {
this.checked = checked;
});
}
}
};
搭配单元格使用
<van-cell center title="标题">
<van-switch v-model="checked" slot="right-icon" size="24" />
</van-cell>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 开关选中状态 | any | false |
loading | 是否为加载状态 | boolean | false |
disabled | 是否为禁用状态 | boolean | false |
size v2.2.11 | 开关尺寸,默认单位为px | number 丨 string | 30px |
active-color | 打开时的背景色 | string | #1989fa |
inactive-color | 关闭时的背景色 | string | white |
active-value | 打开时的值 | any | true |
inactive-value | 关闭时的值 | any | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 开关状态切换回调 | checked: 是否选中开关 |
click v2.2.11 | 点击时触发 | event: Event |
实例
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
选择支付方式:
立即支付
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟