vant-weapp/packages/switch-cell

SwitchCell 开关单元格

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

"usingComponents": {
  "van-switch-cell": "path/to/vant-weapp/dist/switch-cell/index"
}

代码演示

基础用法

<van-switch-cell
  title="标题"
  checked="{{ checked }}"
  bind:change="onChange"
/>

Page({
  data: {
    checked: true
  },

  onChange(event) {
    // 需要手动对 checked 状态进行更新
    this.setData({ checked: event.detail });
  }
});

禁用状态

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

<van-switch-cell
  disabled
  title="标题"
  checked="{{ checked }}"
  bind:change="onChange"
/>

加载状态

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

<van-switch-cell
  loading
  title="标题"
  checked="{{ checked }}"
  bind:change="onChange"
/>

Props

参数	说明	类型	默认值
name	在表单内提交时的标识符	string	-
checked	开关状态	any	false
icon	左侧图标名称或图片链接，可选值见 Icon 组件	string	-
title	左侧标题	string	''
label	标题下方的描述信息	string	-
loading	是否为加载状态	boolean	false
disabled	是否为禁用状态	boolean	false
size	开关尺寸	string	24px
active-color	开关打开时的背景色	string	#1989fa
inactive-color	开关关闭时的背景色	string	#fff
active-value	打开时的值	any	true
inactive-value	关闭时的值	any	false
use-label-slot	是否使用 label slot	boolean	false

Events

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

Slot

名称	说明
title	自定义title显示内容，如果设置了title属性则不生效
label	自定义label显示内容，需要设置 use-label-slot属性
icon	自定义icon显示内容，如果设置了icon属性则不生效