yunshangxie/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue

135 lines
3.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>