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

Props

参数说明类型默认值版本
v-model开关状态nullfalse-
title左侧标题String''-
border是否展示单元格内边框Booleantrue2.0.0
cell-size单元格大小,可选值为 largeString2.0.0
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

Events

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

SwitchCell 开关单元格 - 图1