checkbox-group.vue
1.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
<div class="v-checkbox-group">
<slot></slot>
</div>
</template>
<script>
import utils from '../../src/utils/utils.js'
export default{
name: 'v-checkbox-group',
props: {
value: {
type: Array,
default () {
return [];
}
},
// 是否垂直排列显示（当时checkbox组时生效）
isVerticalShow:{
type:Boolean,
default:false
}
},
methods:{
updateModel(label,checkedVal){
let index = this.value.indexOf(label);
if (index > -1){
if (!checkedVal){
this.value.splice(index, 1);
}
}else{
if (checkedVal){
this.value.push(label);
}
}
this.$emit('input',this.value);
this.$emit('change');
}
},
watch:{
// 更新子组件选中状态
'value'(newVal){
let children = utils.getChildCompsByName(this,'v-checkbox');
if (children.length > 0){
children.forEach(child =>{
child.updateModelByGroup(newVal);
})
}
}
}
}
</script>