sulibao-mini/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue

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