Checkbox 复选框

引入

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

代码演示

基础用法

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

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

禁用状态

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

自定义颜色

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

自定义图标

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

  1. <van-checkboxv-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. exportdefault{
  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-groupv-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. exportdefault{
  2. data(){
  3. return{
  4. list:['a','b','c'],
  5. result:['a','b']
  6. };
  7. }
  8. };

设置最大可选数

  1. <van-checkbox-groupv-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-groupv-model="result">
  2. <van-cell-group>
  3. <van-cell
  4. v-for="(item, index) 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. exportdefault{
  2. methods:{
  3. toggle(index){
  4. this.$refs.checkboxes[index].toggle();
  5. }
  6. }
  7. }

API

Checkbox Props

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

CheckboxGroup Props

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

Checkbox Events

事件名说明回调参数
change当绑定值变化时触发的事件当前组件的值
click点击复选框时触发event: Event

CheckboxGroup Events

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

Checkbox Slots

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

Checkbox 方法

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

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

Checkbox 复选框 - 图1