vant/packages/switch/en-US.md

Switch

Install

import { Switch } from 'vant';

Vue.use(Switch);

Usage

Basic Usage

<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 />

Advanced usage

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

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

  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: 'Confirm',
        message: 'Are you sure to toggle switch?'
      }).then(() => {
        this.checked = checked;
      });
    }
  }
};  

API

Attribute	Description	Type	Default
v-model	Check status of Switch	Boolean	false
loading	Whether to show loading icon	Boolean	false
disabled	Whether to disable switch	Boolean	false
size	Size of switch	String	30px

Event

Event	Description	Parameters
change	Triggered when check status changed	checked: is switch checked