[ColorPicker ]:Fixed colorFormat responsive issues

packages/color-picker/src/main.vue

@@ -1,31 +1,21 @@
 <template>
-  <div
-    :class="[
+  <div :class="[
     'el-color-picker',
     colorDisabled ? 'is-disabled' : '',
     colorSize ? `el-color-picker--${colorSize}` : ''
-    ]"
-    v-clickoutside="hide">
+  ]" v-clickoutside="hide">
     <div class="el-color-picker__mask" v-if="colorDisabled"></div>
     <div class="el-color-picker__trigger" @click="handleTrigger">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
-        <span class="el-color-picker__color-inner"
-          :style="{
+        <span class="el-color-picker__color-inner" :style="{
           backgroundColor: displayedColor
         }"></span>
         <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
       </span>
       <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
     </div>
-    <picker-dropdown
-       ref="dropdown"
-       :class="['el-color-picker__panel', popperClass || '']"
-       v-model="showPicker"
-       @pick="confirmValue"
-       @clear="clearValue"
-       :color="color"
-       :show-alpha="showAlpha"
-       :predefine="predefine">
+    <picker-dropdown ref="dropdown" :class="['el-color-picker__panel', popperClass || '']" v-model="showPicker"
+      @pick="confirmValue" @clear="clearValue" :color="color" :show-alpha="showAlpha" :predefine="predefine">
     </picker-dropdown>
   </div>
 </template>
@@ -98,6 +88,12 @@
         this.showPanelColor = true;
       }
     },
+    colorFormat: {
+      deep: true,
+      handler() {
+        this.color = this.createColor();
+      }
+    },
     displayedColor(val) {
       if (!this.showPicker) return;
       const currentValueColor = new Color({
@@ -114,6 +110,12 @@
   },
 
   methods: {
+    createColor() {
+      return new Color({
+        enableAlpha: this.showAlpha,
+        format: this.colorFormat
+      });
+    },
     handleTrigger() {
       if (this.colorDisabled) return;
       this.showPicker = !this.showPicker;
@@ -162,6 +164,7 @@
 
   mounted() {
     const value = this.value;
+    // this.color = this.createColor();
     if (value) {
       this.color.fromString(value);
     }
@@ -169,13 +172,13 @@
   },
 
   data() {
-      const color = new Color({
-        enableAlpha: this.showAlpha,
-        format: this.colorFormat
-      });
+    // const color = new Color({
+    //   enableAlpha: this.showAlpha,
+    //   format: this.colorFormat
+    // });
 
     return {
-        color,
+      color: this.createColor(),
       showPicker: false,
       showPanelColor: false
     };