Vant Switch switch

Introduced

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

Vue.use(Switch);

Code demo

Basic usage

With the selected state of the v-model binding switch, true indicates on and false indicates off

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

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

The state is disabled

The switch is disabled by the disabled property, and the switch is not clickable in the disabled state

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

The load status

The switch is set to a load state by the loading property, and the switch in the loading state is not clickable

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

Custom size

Customize the size of the switch with size properties

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

Custom colors

The active-color property represents the background color when it is turned on, and the inactive-color represents the background color when it is turned off

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

Asynchronous control

When an asynchronous control switch is required, you can use the value attribute and input event instead of v-model and manually handle the switch state in the input event callback function

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

export default {
  data() {
    return {
      checked: true
    };
  },
  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: '提醒',
        message: '是否切换开关？'
      }).then(() => {
        this.checked = checked;
      });
    }
  }
}; 

Use with cells

<van-cell center title="标题">
  <van-switch v-model="checked" slot="right-icon" size="24" />
</van-cell>

Api

Props

Events