SwitchCell 开关单元格

SwitchCell组件是对SwitchCell组件的封装

使用指南

  1. import { SwitchCell } from 'vant';
  2. Vue.use(SwitchCell);

代码演示

基础用法

  1. <van-cell-group>
  2. <van-switch-cell v-model="checked" title="标题" />
  3. </van-cell-group>
  1. export default {
  2. data() {
  3. return {
  4. checked: true
  5. }
  6. }
  7. }

禁用状态

通过disabled属性可以将组件设置为禁用状态

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

加载状态

通过loading属性可以将组件设置为加载状态

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

API

参数说明类型默认值版本
v-model开关状态nullfalse-
title左侧标题String''-
loading是否为加载状态Booleanfalse-
disabled是否为禁用状态Booleanfalse-
size开关尺寸String24px1.1.11
active-color开关时的背景色String#1989fa1.5.0
inactive-color开关时的背景色String#fff1.5.0
active-value打开时的值anytrue1.5.6
inactive-value关闭时的值anyfalse1.5.6

Event

事件名说明参数
change开关状态切换回调checked: 是否选中开关

原文: https://youzan.github.io/vant/#/zh-CN/switch-cell