SwitchCell 开关单元格

废弃提示

SwitchCell 组件将在 3.0 版本中废弃,请直接使用 Cell 和 Switch 组件代替,替换写法如下:

  1. <van-cell center title="标题">
  2. <template #right-icon>
  3. <van-switch v-model="checked" size="24" />
  4. </template>
  5. </van-cell>

引入

  1. import Vue from 'vue';
  2. import { SwitchCell } from 'vant';
  3. 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开关状态anyfalse
title左侧标题string‘’
border是否展示单元格内边框booleantrue
cell-size单元格大小,可选值为 largestring-
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸number | string24px
active-color开关时的背景色string#1989fa
inactive-color开关时的背景色stringwhite
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

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

SwitchCell 开关单元格 - 图1