Checkbox 复选框

使用指南

  1. import { Checkbox, CheckboxGroup } from 'vant';
  2. Vue.use(Checkbox).use(CheckboxGroup);

代码演示

基础用法

通过v-model绑定 checkbox 的勾选状态

  1. <van-checkbox v-model="checked">复选框</van-checkbox>
  1. export default {
  2. data() {
  3. return {
  4. checked: true
  5. };
  6. }
  7. };

禁用状态

  1. <van-checkbox v-model="checked" disabled>复选框</van-checkbox>

自定义颜色

  1. <van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>

自定义图标

通过 icon 插槽自定义图标,可以通过 slot-scope 判断是否为选中状态

  1. <van-checkbox v-model="checked">
  2. 自定义图标
  3. <img
  4. slot="icon"
  5. slot-scope="props"
  6. :src="props.checked ? icon.active : icon.normal"
  7. >
  8. </van-checkbox>
  1. export default {
  2. data() {
  3. checked: true,
  4. icon: {
  5. normal: '//img.yzcdn.cn/icon-normal.png',
  6. active: '//img.yzcdn.cn/icon-active.png'
  7. }
  8. }
  9. }

复选框组

van-checkbox-group一起使用,选中值是一个数组,通过v-model绑定在van-checkbox-group上,数组中的项即为选中的Checkboxname属性设置的值

  1. <van-checkbox-group v-model="result">
  2. <van-checkbox
  3. v-for="(item, index) in list"
  4. :key="item"
  5. :name="item"
  6. >
  7. 复选框 {{ item }}
  8. </van-checkbox>
  9. </van-checkbox-group>
  1. export default {
  2. data() {
  3. return {
  4. list: ['a', 'b', 'c'],
  5. result: ['a', 'b']
  6. };
  7. }
  8. };

设置最大可选数

  1. <van-checkbox-group v-model="result" :max="2">
  2. <van-checkbox
  3. v-for="(item, index) in list"
  4. :key="item"
  5. :name="item"
  6. >
  7. 复选框 {{ item }}
  8. </van-checkbox>
  9. </van-checkbox-group>

搭配单元格组件使用

此时你需要再引入CellCellGroup组件,并通过 checkbox 的 toggle 方法手动触发切换

  1. <van-checkbox-group v-model="result">
  2. <van-cell-group>
  3. <van-cell
  4. v-for="item in list"
  5. clickable
  6. :key="item"
  7. :title="`复选框 ${item}`"
  8. @click="toggle(index)"
  9. >
  10. <van-checkbox :name="item" ref="checkboxes" />
  11. </van-cell>
  12. </van-cell-group>
  13. </van-checkbox-group>
  1. export default {
  2. methods: {
  3. toggle(index) {
  4. this.$refs.checkboxes[index].toggle();
  5. }
  6. }
  7. }

Checkbox API

参数说明类型默认值版本
name标识符any--
shape形状,可选值为 squareStringround-
v-model是否为选中状态Booleanfalse-
disabled是否禁用单选框Booleanfalse-
label-disabled是否禁用单选框文本点击Booleanfalse-
label-position文本位置,可选值为 leftStringright1.1.11
checked-color选中状态颜色String#1989fa1.4.3

CheckboxGroup API

参数说明类型默认值版本
v-model所有选中项的标识符Array--
disabled是否禁用所有单选框Booleanfalse-
max设置最大可选数,0 为无限制Number0-

Checkbox Event

事件名称说明回调参数
change当绑定值变化时触发的事件当前组件的值

CheckboxGroup Event

事件名称说明回调参数
change当绑定值变化时触发的事件当前组件的值

Checkbox 插槽

名称说明slot-scope
-自定义文本-
icon自定义图标checked: 是否为选中状态

Checkbox 方法

通过 ref 可以获取到 checkbox 实例并调用实例方法

方法名参数返回值介绍
toggle--切换选中状态

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