feat: complete function for ColorCheckBox components

chenghx

2018-08-23 702a9dd8323278619bd217f8afcbf0634b7a20f5

feat: complete function for ColorCheckBox components

 src/components/check/ColorCheckBox.vue

@@ -14,11 +14,28 @@
      type: Array,
      required: false,
      default: () => []
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      values: this.defaultValues
      values: [],
      options: []
    }
  },
  computed: {
    colors () {
      let colors = []
      this.options.forEach(item => {
        if (item.sChecked) {
          colors.push(item.color)
        }
      })
      return colors
    }
  },
  provide () {
@@ -26,15 +43,30 @@
      groupContext: this
    }
  },
  methods: {
    handleChange (value) {
      if (!value.checked) {
        const values = this.values.filter(item => item.value !== value.value)
        this.values = values
      } else {
        this.values.push(value)
  watch: {
    'values': function (newVal, oldVal) {
      // 此条件是为解决单选时，触发两次chang事件问题
      if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0])) {
        this.$emit('change', this.values, this.colors)
      }
      this.$emit('change', this.values)
    }
  },
  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) {
@@ -80,7 +112,17 @@
        checked: this.sChecked
      }
      this.$emit('change', value)
      this.groupContext.handleChange(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: {

 src/components/setting/Setting.vue

@@ -7,8 +7,8 @@
      </div>
    </setting-item>
    <setting-item title="主题色">
      <color-check-box-group @change="onColorChange">
        <color-check-box color="rgb(245, 34, 45)" value="1" />
      <color-check-box-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
        <color-check-box ref="colorNode" color="rgb(245, 34, 45)" value="1" />
        <color-check-box color="rgb(250, 84, 28)" value="2" />
        <color-check-box color="rgb(250, 173, 20)" value="3" />
        <color-check-box color="rgb(19, 194, 194)" value="4" />
@@ -97,8 +97,10 @@
    AIcon,
    ALayoutSider},
  methods: {
    onColorChange (values) {
      console.log(values)
    onColorChange (values, colors) {
      if (colors.length > 0) {
        this.$message.info(`选择了主题色 ${colors}`)
      }
    }
  }
}