Vant Checkbox 复选框
引入
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
代码演示
基础用法
通过v-model绑定复选框的勾选状态
<van-checkbox v-model="checked">复选框</van-checkbox>
export default {
data() {
return {
checked: true
};
}
};
禁用状态
通过设置disabled属性可以禁用复选框
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
禁用文本点击
设置icon-disabled属性后,点击复选框图标以外的内容不会触发切换
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
自定义形状
将shape属性设置为square,复选框的形状会变成方形
<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
自定义颜色
通过checked-color属性可以自定义选中状态下的图标颜色
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
自定义大小
通过icon-size属性可以自定义图标的大小
<van-checkbox v-model="checked" icon-size="24px">复选框</van-checkbox>
自定义图标
通过 icon 插槽自定义图标,可以通过slotProps判断是否为选中状态
<van-checkbox v-model="checked">
自定义图标
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-checkbox>
export default {
data() {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
复选框组
复选框可以与复选框组一起使用,选中值是一个数组,通过v-model绑定在CheckboxGroup上,数组中的值为选中的复选框的name
<van-checkbox-group v-model="result">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
export default {
data() {
return {
result: ['a', 'b']
};
}
};
设置最大可选数
通过max属性可以限制最大可选数
<van-checkbox-group v-model="result" :max="2">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
全选与反选
通过CheckboxGroup实例上的toggleAll方法可以实现全选与反选
<van-checkbox-group v-model="result" ref="checkboxGroup">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
<van-button type="primary" @click="checkAll">全选</van-button>
<van-button type="info" @click="toggleAll">反选</van-button>
export default {
data() {
return {
result: []
}
},
methods: {
checkAll() {
this.$refs.checkboxGroup.toggleAll(true);
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
搭配单元格组件使用
此时你需要再引入Cell和CellGroup组件,并通过Checkbox实例上的 toggle 方法触发切换
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="item"
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
export default {
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
API
Checkbox Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标识符 | any | - |
shape | 形状,可选值为 square | string | round |
v-model | 是否为选中状态 | boolean | false |
disabled | 是否禁用复选框 | boolean | false |
label-disabled | 是否禁用复选框文本点击 | boolean | false |
label-position | 文本位置,可选值为 left | string | right |
icon-size | 图标大小,默认单位为px | number | string | 20px |
checked-color | 选中状态颜色 | string | #1989fa |
bind-group v2.2.4 | 是否与复选框组绑定 | boolean | true |
CheckboxGroup Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 所有选中项的标识符 | any[] | - |
disabled | 是否禁用所有复选框 | boolean | false |
max | 最大可选数,0 为无限制 | number | string | 0 |
icon-size v2.2.3 | 所有复选框的图标大小,默认单位为px | number | string | 20px |
checked-color v2.2.3 | 所有复选框的选中状态颜色 | string | #1989fa |
Checkbox Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当绑定值变化时触发的事件 | 当前组件的值 |
click | 点击复选框时触发 | event: Event |
CheckboxGroup Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当绑定值变化时触发的事件 | 当前组件的值 |
Checkbox Slots
名称 | 说明 | SlotProps |
---|---|---|
default | 自定义文本 | - |
icon | 自定义图标 | checked: 是否为选中状态 |
CheckboxGroup 方法
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法,详见 组件实例方法
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
toggleAll | 切换所有复选框,传true 为选中,false 为取消选中,不传参为取反 | checked?: boolean | - |
Checkbox 方法
通过 ref 可以获取到 Checkbox 实例并调用实例方法,详见 组件实例方法
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
toggle | 切换选中状态,传true 为选中,false 为取消选中,不传参为取反 | checked?: boolean | - |