优化: 颜色选择器组件支持传参显示位置

src/components/MyColorPicker/MyColorPicker.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="color-picker">
+    <color-picker v-model="sValue" :position="positionCom" @change="onChange" />
+    <!-- <div class="color-btn"></div>
+    <div class="picker-box">
+    </div>-->
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { ColorPicker, ColorPanel } from 'one-colorpicker'
+
+// Vue.use(ColorPicker)
+Vue.use(ColorPanel)
+
+// 颜色选择器
+export default {
+  name: 'MyColorPicker',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    // v-model 当前颜色值 hex srgb
+    value: PropTypes.string.def(''),
+    // 显示位置 right left
+    horizontal: PropTypes.string.def('right'),
+  },
+  components: {
+    ColorPicker,
+    // ColorPanel,
+  },
+  computed: {
+    positionCom () {
+      // const val = horizontal === 'left' ? { left: 0 } : { right: 0 }
+      const val = { [this.horizontal]: 0 }
+      return { top: '40px', ...val }
+    }
+  },
+  data () {
+    return {
+      // 当前值
+      sValue: ''
+    }
+  },
+  watch: {
+    value: {
+      // 首次加载的时候执行函数
+      immediate: true,
+      handler (val) {
+        this.sValue = val
+      }
+    }
+  },
+  methods: {
+
+    // 触发change事件
+    onChange (value) {
+      this.$emit('change', value)
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.color-picker {
+  display: block;
+  background-color: #ffffff;
+  border: 1px solid #efefef;
+  padding: 5px;
+  width: 60px;
+  height: 32px;
+  position: relative;
+}
+/deep/.one-colorpicker {
+  .color-block {
+    width: 48px;
+    height: 20px;
+    border: 1px solid #000;
+  }
+}
+</style>

src/views/store/style/Theme.vue

@@ -36,32 +36,50 @@
               </a-form-model-item>
               <a-form-model-item label="主背景">
                 <div class="color-picker-row">
-                  <MyColorPicker v-model="record.data.mainBg" defaultColor="#fff" />
+                  <MyColorPicker
+                    v-model="record.data.mainBg"
+                    defaultColor="#fff"
+                    horizontal="left"
+                  />
                   <MyColorPicker
                     v-if="record.data.gradualChange"
                     v-model="record.data.mainBg2"
                     defaultColor="#fff"
+                    horizontal="left"
                   />
                 </div>
               </a-form-model-item>
               <a-form-model-item label="主文字">
                 <div class="color-picker-row">
-                  <MyColorPicker v-model="record.data.mainText" defaultColor="#fff" />
+                  <MyColorPicker
+                    v-model="record.data.mainText"
+                    defaultColor="#fff"
+                    horizontal="left"
+                  />
                 </div>
               </a-form-model-item>
               <a-form-model-item label="副背景">
                 <div class="color-picker-row">
-                  <MyColorPicker v-model="record.data.viceBg" defaultColor="#fff" />
+                  <MyColorPicker
+                    v-model="record.data.viceBg"
+                    defaultColor="#fff"
+                    horizontal="left"
+                  />
                   <MyColorPicker
                     v-if="record.data.gradualChange"
                     v-model="record.data.viceBg2"
                     defaultColor="#fff"
+                    horizontal="left"
                   />
                 </div>
               </a-form-model-item>
               <a-form-model-item label="副文字">
                 <div class="color-picker-row">
-                  <MyColorPicker v-model="record.data.viceText" defaultColor="#fff" />
+                  <MyColorPicker
+                    v-model="record.data.viceText"
+                    defaultColor="#fff"
+                    horizontal="left"
+                  />
                 </div>
               </a-form-model-item>
             </div>