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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| <template>
| <!--本文件由FirstUI授权予四川政采招投标咨询有限公司（会员ID：1 63，营业执照号： 9 15 10 1 313 32 006 193K）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
| <!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO|| MP-KUAISHOU || MP-JD || MP-360 || MP-LARK -->
| <checkbox-group :name="name">
| <slot></slot>
| </checkbox-group>
| <!-- #endif -->
|
| <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
| <fui-form-field :name="name" v-model="vals">
| <slot></slot>
| </fui-form-field>
| <!-- #endif -->
| </template>
|
| <script>
| export default {
| name: "fui-checkbox-group",
| emits: ['change', 'input', 'update:modelValue'],
| // #ifdef MP-WEIXIN
| behaviors: ['wx://form-field-group'],
| // #endif
| // #ifdef MP-BAIDU
| behaviors: ['swan://form-field'],
| // #endif
| // #ifdef MP-QQ
| behaviors: ['qq://form-field'],
| // #endif
| // #ifdef H5
| behaviors: ['uni://form-field'],
| // #endif
| props: {
| name: {
| type: String,
| default: ''
| },
| // #ifdef VUE3
| modelValue: {
| type: Array,
| default () {
| return []
| }
| },
| // #endif
| // #ifdef VUE2
| value: {
| type: Array,
| default () {
| return []
| }
| }
| // #endif
| },
| data() {
| return {
| vals: ''
| };
| },
| watch: {
| // #ifdef VUE3
| modelValue(vals) {
| this.modelChange(vals)
| },
| // #endif
| // #ifdef VUE2
| value(vals) {
| this.modelChange(vals)
| }
| // #endif
| },
| created() {
| this.childrens = []
| },
| methods: {
| checkboxChange(e) {
| this.$emit('change', e)
| // TODO vue2 兼容
| this.$emit('input', e.detail.value)
| // TODO vue3 兼容
| // #ifdef VUE3
| this.$emit("update:modelValue", e.detail.value);
| // #endif
| },
| changeValue(checked, target) {
| const vals = []
| this.childrens.forEach(item => {
| if (item.val) {
| vals.push(item.value);
| }
| })
| this.vals = vals;
| let e = {
| detail: {
| value: vals
| }
| }
| this.checkboxChange(e)
| },
| modelChange(vals) {
| this.childrens.forEach(item => {
| if (vals.includes(item.value)) {
| item.val = true;
| } else {
| item.val = false
| }
| })
| }
| }
| }
| </script>
|
| <style scoped></style>
|
|
