Vant 复选框半选中状态

836 阅读1分钟

公司移动端组件的开发有一个部门选择器,老大封装了vant的复选框组,然后让我解决半选的问题。

image.png

就是子部门未选满时。显示半选,我看了下vant的复选框文档,发现了有个自定义图标

image.png发现是用插槽来实现的,那么我只要创建一个条件来确定是否是半选来实现自定义图标就行了(语言表达能力不太好。。) 要判断是否是半选要获取他所有子部门,来和已选中的子部门来比较。相等就是全选,不相等并且已选中的子部门不等于0就是半选。 先在子组件里添加一个位置

image.png 再在父组件里使用
<!-- 添加复选功能 --> <template slot="icon" slot-scope="scope" v-if="getPeopleNum(scope.item) > getChosenNum(scope.item)&&getChosenNum(scope.item) > 0"> <img class="img-icon" src="./img/helf-chose.svg" /> </template>
这两个函数是获取所有子部门和获取已选中的子部门,不用管。看下效果吧

image.png