在使用 Vant 组件库时，van-checkbox 组件提供了简单的多选功能，但是其默认只支持“全选”和“未选”状态。我们经常需要一个“半选”状态来表示某些子项被选中，但并不是全部选中。
1. 需求背景
我们通常会遇到以下两种常见的需求：
- 全选：当所有子项都选中时，父项需要自动变为全选状态。
- 半选：当部分子项被选中时，父项显示为半选状态（通常是一个减号标志）。
- 未选：当没有子项被选中时，父项显示为未选状态。
在这些场景下，我们希望能够利用 Vant 提供的 van-checkbox 来同时实现三种状态：全选、半选、未选。
2. 解决方案
Vant 的 van-checkbox 组件本身并不直接支持半选状态（即“部分选中”状态），但是我们可以通过结合 v-if 和插槽 #icon 来定制一个自定义的半选标识。通过判断是否是半选状态，我们可以在勾选框内显示减号图标，来代表半选状态。
3. 代码实现
<template>
<van-checkbox
style="margin-right: 10px"
shape="square"
:value="checkAllStatus"
>
<!-- 自定义半选状态的图标 -->
<template #icon v-if="indeterminateStatus">
<div style="height:100%;width:100%;background:#1989fa;">
<van-icon style="border:none;" color="#fff" name="minus" />
</div>
</template>
</van-checkbox>
</template>
<script>
export default {
data() {
return {
checkAllStatus: false, // 全选框的选中状态
indeterminateStatus: false // 半选框的状态
};
},
}
</script>
