vant/src-next/switch

Switch

Install

import Vue from 'vue';
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 />

Custom Size

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

Custom Color

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

Async Control

<van-switch :model-value="checked" @update:model:value="onUpdateValue" />

export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onUpdateValue(checked) {
      Dialog.confirm({
        title: 'Confirm',
        message: 'Are you sure to toggle switch?',
      }).then(() => {
        this.checked = checked;
      });
    },
  },
};

Inside a Cell

<van-cell center title="Title">
  <template #right-icon>
    <van-switch v-model="checked" size="24" />
  </template>
</van-cell>

API

Props

Attribute	Description	Type	Default
v-model	Check status of Switch	ActiveValue | InactiveValue	false
loading	Whether to show loading icon	boolean	false
disabled	Whether to disable switch	boolean	false
size v2.2.11	Size of switch	number | string	30px
active-color	Background color when active	string	#1989fa
inactive-color	Background color when inactive	string	white
active-value	Value when active	any	true
inactive-value	Value when inactive	any	false

Events

Event	Description	Parameters
change	Triggered when check status changed	value: any
click v2.2.11	Triggered when clicked	event: Event