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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| <template>
| <view class="tn-checkbox-group-class tn-checkbox-group">
| <slot></slot>
| </view>
| </template>
|
| <script>
| import Emitter from '../../libs/utils/emitter.js'
|
| export default {
| mixins: [ Emitter ],
| name: 'tn-checkbox-group',
| props: {
| value: {
| type: Array,
| default() {
| return []
| }
| },
| // 可以选中多少个checkbox
| max: {
| type: Number,
| default: 999
| },
| // 表单提交时的标识符
| name: {
| type: String,
| default: ''
| },
| // 禁用选择
| disabled: {
| type: Boolean,
| default: false
| },
| // 禁用点击标签进行选择
| disabledLabel: {
| type: Boolean,
| default: false
| },
| // 选择框的形状 square 方形 circle 圆形
| shape: {
| type: String,
| default: 'square'
| },
| // 选中时的颜色
| activeColor: {
| type: String,
| default: '#01BEFF'
| },
| // 组件大小
| size: {
| type: Number,
| default: 34
| },
| // 每个checkbox占的宽度
| width: {
| type: String,
| default: 'auto'
| },
| // 是否换行
| wrap: {
| type: Boolean,
| default: false
| },
| // 图标大小
| iconSize: {
| type: Number,
| default: 20
| }
| },
| computed: {
| // 这里computed的变量，都是子组件tn-checkbox需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
| // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(tn-checkbox-group)
| // 拉取父组件新的变化后的参数
| parentData() {
| return [this.value, this.disabled, this.disabledLabel, this.shape, this.activeColor, this.size, this.width, this.wrap, this.iconSize]
| }
| },
| data() {
| return {
|
| }
| },
| watch: {
| // 当父组件中的子组件需要共享的参数发生了变化，手动通知子组件
| parentData() {
| if (this.children.length) {
| this.children.map(child => {
| // 判断子组件(tn-checkbox)如果有updateParentData方法的话，子组件重新从父组件拉取了最新的值
| typeof(child.updateParentData) === 'function' && child.updateParentData()
| })
| }
| }
| },
| created() {
| this.children = []
| },
| methods: {
| initValue(values) {
| this.$emit('input', values)
| },
| // 触发事件
| emitEvent() {
| let values = []
| this.children.map(child => {
| if (child.checkValue) values.push(child.name)
| })
| this.$emit('change', values)
| this.$emit('input', values)
| // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
| // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
| setTimeout(() => {
| // 将当前的值发送到 tn-form-item 进行校验
| this.dispatch('tn-form-item', 'on-form-change', values)
| }, 60)
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
|
| .tn-checkbox-group {
| /* #ifndef MP || APP-NVUE */
| display: inline-flex;
| flex-wrap: wrap;
| /* #endif */
| &::after {
| content: " ";
| display: table;
| clear: both;
| }
| }
| </style>
|
|
