vue-antd-admin-skeleton/src/components/check/ColorCheckBox.vue

<template>
  <div class="theme-color" :style="{backgroundColor: color}" @click="toggle">
    <a-icon v-if="sChecked" type="check" />
  </div>
</template>

<script>
import AIcon from 'ant-design-vue/es/icon/icon'

const Group = {
  name: 'ColorCheckBoxGroup',
  props: {
    defaultValues: {
      type: Array,
      required: false,
      default: () => []
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      values: [],
      options: []
    }
  },
  computed: {
    colors () {
      let colors = []
      this.options.forEach(item => {
        if (item.sChecked) {
          colors.push(item.color)
        }
      })
      return colors
    }
  },
  provide () {
    return {
      groupContext: this
    }
  },
  watch: {
    values: function (newVal, oldVal) {
      // 此条件是为解决单选时，触发两次chang事件问题
      if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0]) || this.multiple) {
        this.$emit('change', this.values, this.colors)
      }
    }
  },
  methods: {
    handleChange (option) {
      if (!option.checked) {
        this.values = this.values.filter(item => item !== option.value)
      } else {
        if (!this.multiple) {
          this.values = [option.value]
          this.options.forEach(item => {
            if (item.value !== option.value) {
              item.sChecked = false
            }
          })
        } else {
          this.values.push(option.value)
        }
      }
    }
  },
  render (h) {
    const clear = h('div', {attrs: {style: 'clear: both'}})
    return h(
      'div',
      {},
      [this.$slots.default, clear]
    )
  }
}

export default {
  name: 'ColorCheckBox',
  Group: Group,
  components: {AIcon},
  props: {
    color: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      sChecked: this.checked
    }
  },
  inject: ['groupContext'],
  watch: {
    'sChecked': function (val) {
      const value = {
        value: this.value,
        color: this.color,
        checked: this.sChecked
      }
      this.$emit('change', value)
      const groupContext = this.groupContext
      if (groupContext) {
        groupContext.handleChange(value)
      }
    }
  },
  created () {
    const groupContext = this.groupContext
    if (groupContext) {
      this.sChecked = groupContext.defaultValues.indexOf(this.value) >= 0
      groupContext.options.push(this)
    }
  },
  methods: {
    toggle () {
      this.sChecked = !this.sChecked
    }
  }
}
</script>

<style lang="less" scoped>
  .theme-color{
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 8px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
</style>