color选择组件

report-ui/src/views/report/bigscreen/designer/form/colorPicker.vue

@@ -1,71 +1,70 @@
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-4-8 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-4-8 11:04:24
- !-->
 <template>
-  <el-popover placement="right"
-              trigger="click">
-    <Chrome v-model="colors"
-            @input="updateValue" />
-    <el-input slot="reference"
-              v-model="colors.hex"
+  <el-input
+    clearable
+    v-model="colorValue"
+    placeholder="请输入颜色"
     size="mini"
-              placeholder="颜色选择器">
-      <template #append><i class="iconfont iconcolorSelector" /></template>
+    @change="changeColor"
+  >
+    <template slot="append">
+      <el-color-picker
+        v-model="colorValue"
+        :predefine="predefineColors"
+        size="mini"
+        @change="changeColor"
+      />
+    </template>
   </el-input>
-  </el-popover>
 </template>
 
 <script>
-import { Chrome } from 'vue-color' // https://gitee.com/mirrors/vue-color  // Photoshop Chrome
 export default {
-  name: 'ColorPicker',
-  components: {
-    Chrome,
-  },
+  name: "ColorPicker",
   model: {
-    prop: 'value',
-    event: 'input',
+    prop: "value",
+    event: "input"
   },
   props: {
     value: {
       type: [String],
-      default: '',
-    },
+      default: ""
+    }
   },
-  data () {
+  data() {
     return {
-      colors: {
-        hex: '',
-        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
-        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
-        rgba: { r: 25, g: 77, b: 51, a: 1 },
-      },
-    }
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585"
+      ],
+      colorValue: ""
+    };
   },
   watch: {
-    value (val) {
-      this.colors.hex = val
+    value(val) {
+      this.colorValue = val || "";
     }
   },
-  mounted () {
-    this.colors.hex = this.value
+  mounted() {
+    this.colorValue = this.value;
   },
   methods: {
-    updateValue (value) {
-      // this.colors = value
-      this.$emit('input', value.hex)
-      this.$emit('change', value.hex)
-    },
-  },
-}
+    changeColor(val) {
+      this.colorValue = val || "";
+      this.$emit("input", this.colorValue);
+      this.$emit("change", this.colorValue);
+    }
+  }
+};
 </script>
-
-<style scoped lang="scss">
-/deep/.el-input-group__append {
-  width: 20px;
-  padding: 0 5px;
+<style lang="scss" scoped>
+/deep/.el-color-picker--mini,
+/deep/.el-color-picker--mini .el-color-picker__trigger {
+  width: 23px;
+  height: 23px;
 }
 </style>

report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue

@@ -167,8 +167,8 @@ export default {
 /deep/.el-table::before {
   height: 0;
 }
-/deep/.el-form-item--mini .el-color-picker--mini,
-/deep/.el-form-item--mini .el-color-picker--mini .el-color-picker__trigger {
+/deep/.el-color-picker--mini,
+/deep/.el-color-picker--mini .el-color-picker__trigger {
   width: 23px;
   height: 23px;
 }

report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue

@@ -52,7 +52,6 @@
               placeholder="请输入内容"
               @change="changed($event, item.name)"
             />
-
             <ColorPicker
               v-if="item.type == 'vue-color'"
               v-model="formData[item.name]"