• SwitchCell 开关单元格
    • 介绍
    • 引入
  • 代码演示
    • 基础用法
    • 禁用状态
    • 加载状态
  • API
    • Props
    • Events

    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