feat: complete function for ColorCheckBox components

src/components/check/ColorCheckBox.vue

@@ -14,11 +14,28 @@ const Group = {
       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 @@ const Group = {
       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)
+      }
+    }
+  },
+  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)
+        }
       }
-      this.$emit('change', this.values)
     }
   },
   render (h) {
@@ -80,7 +112,17 @@ export default {
         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 @@ export default {
     AIcon,
     ALayoutSider},
   methods: {
-    onColorChange (values) {
-      console.log(values)
+    onColorChange (values, colors) {
+      if (colors.length > 0) {
+        this.$message.info(`选择了主题色 ${colors}`)
+      }
     }
   }
 }