Vant Checkbox 复选框功能介绍

发布时间：2023-04-19 14:07:34 所属栏目：教程来源：

导读：Vant CheckBox 复选框主要支持一些常规复选框功能的使用。

引入
import Vue from 'vue';
import { CheckBox, CheckBoxGroup } from 'vant';

Vue.use(CheckBox);
Vue.use(CheckBoxGroup);

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>
禁用文本点击
设置label-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();
}
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!