Vant Switch 開關(guān)

引入

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

Vue.use(Switch);

代碼演示

基礎(chǔ)用法

通過v-model綁定開關(guān)的選中狀態(tài)，true表示開，false表示關(guān)

<van-switch v-model="checked" />

export default {
  data() {
    return {
      checked: true
    };
  }
};  

禁用狀態(tài)

通過disabled屬性來禁用開關(guān)，禁用狀態(tài)下開關(guān)不可點(diǎn)擊

<van-switch v-model="checked" disabled />

加載狀態(tài)

通過loading屬性設(shè)置開關(guān)為加載狀態(tài)，加載狀態(tài)下開關(guān)不可點(diǎn)擊

<van-switch v-model="checked" loading />

自定義大小

通過size屬性自定義開關(guān)的大小

<van-switch v-model="checked" size="24px" />

自定義顏色

active-color屬性表示打開時(shí)的背景色，inactive-color表示關(guān)閉時(shí)的背景色

<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />

異步控制

需要異步控制開關(guān)時(shí)，可以使用value屬性和input事件代替v-model，并在input事件回調(diào)函數(shù)中手動(dòng)處理開關(guān)狀態(tài)

<van-switch :value="checked" @input="onInput" />

export default {
  data() {
    return {
      checked: true
    };
  },
  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: '提醒',
        message: '是否切換開關(guān)？'
      }).then(() => {
        this.checked = checked;
      });
    }
  }
}; 

搭配單元格使用

<van-cell center title="標(biāo)題">
  <van-switch v-model="checked" slot="right-icon" size="24" />
</van-cell>

API

Props

Events