fix:优化颜色选择器配置

data-room-ui/packages/ColorMultipleSelect/index.vue

@@ -7,47 +7,28 @@
   <el-select
     ref="colorSelect"
     v-model="myColor"
+    value-key="value"
     class="bs-el-select select"
     popper-class="bs-el-select"
     placeholder=""
     style="width: 100%"
     @change="handleChange"
   >
-    <div slot="prefix">
-      <span style="float: left"></span>
-      <span
-        v-for="(item, index) in colorValue"
-        :key="index"
-      >
-        <span
-          v-if="index <= 14"
-          :style="'float: left ;background-color:' + item + ';width:15px;border-radius:1px;display:inline-block;height:15px;margin-top:8px;'"
-        />
-        <span
-          v-if="index <= 14"
-          style="float: left"
-        >
-        </span>
-        <span
-          v-if="index === 15"
-          style="float: left"
-        >
-          &nbsp;...
-        </span>
-      </span>
-    </div>
     <el-option
       v-for="(item, index) in colorList"
       :key="index"
-      label=" "
+      :label="item.label"
-      :value="item"
+      :value="item.value"
     >
-      <span
+      <span style="float: left">{{ item.label }}</span>
-        v-for="(co, ind) in item"
+      <span style="float: right">
-        :key="ind"
+        <span
-      >
+          v-for="(co, ind) in JSON.parse(item.value)"
-        <span :style="'float: left ;background-color:' + co + ';width:15px;border-radius:1px;display:inline-block;height:15px;margin-top:9px;'" />
+          :key="ind"
-        <span style="float: left">&nbsp; </span>
+        >
+          <span :style="'float: left ;background-color:' + co + ';width:10px;border-radius:1px;display:inline-block;height:15px;margin-top:9px;'" />
+          <span style="float: left">&nbsp; </span>
+        </span>
       </span>
     </el-option>
   </el-select>
@@ -61,18 +42,6 @@ export default {
     event: 'update'
   },
   props: {
-    // 颜色数组
-    colorList: {
-      type: Array,
-      default: () => {
-        return [
-          ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-          ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA'],
-          ['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A', '#007E99', '#FFA8A8', '#2391FF'],
-          ['#FF4500', '#1AAF8B', '#406C85', '#F6BD16', '#B40F0F', '#2FB8FC', '#4435FF', '#FF5CA2', '#BBE800', '#FE8A26']
-        ]
-      }
-    },
     // 父组件绑定的值
     color: {
       type: Array,
@@ -81,32 +50,80 @@ export default {
   },
   data () {
     return {
-      colorValue: [],
+      colorList: [
-      myColor: undefined
+        {
+          label: '配色1',
+          value: JSON.stringify(['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'])
+        },
+        {
+          label: '配色2',
+          value: JSON.stringify(['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA'])
+        },
+        {
+          label: '配色3',
+          value: JSON.stringify(['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A', '#007E99', '#FFA8A8', '#2391FF'])
+        },
+        {
+          label: '配色4',
+          value: JSON.stringify(['#FF4500', '#1AAF8B', '#406C85', '#F6BD16', '#B40F0F', '#2FB8FC', '#4435FF', '#FF5CA2', '#BBE800', '#FE8A26'])
+        }
+      ],
+      colorValue: []
+      // myColor: undefined
     }
   },
   watch: {
     color: function (val) {
-      this.setSelectColor(val)
+      this.init(val)
     }
   },
-  created () {
+  computed: {
-    if (this.color) {
+    myColor: {
-      this.myColor = this.color
+      get () {
-      this.setSelectColor(this.color)
+        return JSON.stringify(this.color) || JSON.stringify(['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'])
+      },
+      set (val) {
+
+      }
+
     }
   },
+  created () {
+  },
+  mounted () {
+    this.init(this.color)
+  },
   methods: {
-    // 设置颜色选择框中颜色
+    // 初始化colorList,当绑定的颜色跟预设的颜色不一致时
-    setSelectColor (color) {
+    init (color) {
-      this.$nextTick(() => {
+      // ,当绑定的颜色跟预设的颜色是否一致
-        this.colorValue = this.color
+      const flag = this.colorList.some(co => co.value === JSON.stringify(color))
-      })
+      // colorList是否存在自定义选项
+      const f = this.colorList.some(co => co.label === '自定义')
+      if (!flag) {
+        if (f) {
+          this.colorList = this.colorList.map(co => {
+            if (co.label === '自定义') {
+              return {
+                label: '自定义',
+                value: JSON.stringify(color)
+              }
+            } else {
+              return co
+            }
+          })
+        } else {
+          this.colorList.push({
+            label: '自定义',
+            value: JSON.stringify(color)
+          })
+        }
+      }
     },
     handleChange (val) {
-      this.setSelectColor(val)
+      const colors = JSON.parse(val)
       // 触发update事件更新父组件绑定值
-      this.$emit('update', val)
+      this.$emit('update', colors)
     }
   }
 }