Vant Switch 开关
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>