Vant SwitchCell switch cells

May 07, 2021 Vant

SwitchCell components will be discarded in version 3.0, please use cell and Switch components directly instead

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

Vue.use(SwitchCell);

Code demo

<van-cell-group>
  <van-switch-cell v-model="checked" title="标题" />
</van-cell-group>

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

The disabled property allows you to set the component to disable

<van-cell-group>
  <van-switch-cell v-model="checked" disabled title="标题" />
</van-cell-group>

The loading property allows you to set the component to a load state

<van-cell-group>
  <van-switch-cell v-model="checked" loading title="标题" />
</van-cell-group>

Parameters	Description	Type	The default
v-model	Switch status	any	`false`
title	The title on the left	string	`''`
border	Whether to display the inner border of the cell	boolean	`true`
cell-size	Cell size, with an optional value of `large`	string	-
loading	Whether it is a load state	boolean	`false`
disabled	Whether it is disabled or not	boolean	`false`
size	Switch size	number \| string	`24px`
active-color	The background color at the time of the switch	string	`#1989fa`
inactive-color	The background color at the time of the switch	string	`white`
active-value	The value when it is opened	any	`true`
inactive-value	The value when closed	any	`false`

The name of the event	Description	Callback parameters
change	Switch callbacks in the switch state	Checked: Whether to select the switch