Vant Switch 开关介绍

发布时间：2023-04-20 12:32:45 所属栏目：教程来源：

导读：Vant Switch 开关主要是实现模拟iOS开关的效果。

引入
import Vue from 'vue';
import { Switch } from 'vant';

Vue.use(Switch);
基础用法
通过v-model绑定开关的选中状态，true表示开，

Vant Switch 开关主要是实现模拟iOS开关的效果。

引入
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>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!