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="#ee0a24" inactive-color="#dcdee0" />

Async Control

<van-switch :value="checked" @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;
      });
    },
  },
};

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	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	Emitted when check status changed	value: any
click	Emitted when component is clicked	event: Event

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@switch-size	`30px`	-
@switch-width	`2em`	-
@switch-height	`1em`	-
@switch-node-size	`1em`	-
@switch-node-background-color	`@white`	-
@switch-node-box-shadow	`0 3px 1px 0 rgba(0, 0, 0, 0.05)`	-
@switch-background-color	`@white`	-
@switch-on-background-color	`@blue`	-
@switch-transition-duration	`@animation-duration-base`	-
@switch-disabled-opacity	`@disabled-opacity`	-
@switch-border	`@border-width-base solid rgba(0, 0, 0, 0.1)`	-