# checkbox-group组件
使用checkbox-group组件包裹checkbox
# 结构
<template>
<div class="xc-checkbox-group">
<slot></slot>
</div>
</template>
1
2
3
4
5
2
3
4
5
- 提供provide
props:{
value: {
type: Array,
default:()=>{return []}
}
},
provide() {
return {
CheckboxGroup: this
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 修改checkbox
- 接收inject
inject: {
CheckboxGroup: {
default: ""
}
}
1
2
3
4
5
2
3
4
5
- 计算属性
computed: {
isGroup() {
return !!this.CheckboxGroup;
},
model: {
get() {
return this.isGroup ? this.CheckboxGroup.value : this.value;
},
set(value) {
this.isGroup
? this.CheckboxGroup.$emit("input", value)
: this.$emit("input", value);
}
},
isChecked() {
// 如果是group包裹, 判断label是否在model中
// 如果没有group包裹, 直接使用model
return this.isGroup ? this.model.includes(this.label) : this.model
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
← checkbox组件 form组件 →