[ColorPicker ]:Fixed colorFormat responsive issues

packages/color-picker/src/main.vue

@@ -1,42 +1,32 @@
 <template>
-  <div
-    :class="[
+  <div :class="[
     'el-color-picker',
     colorDisabled ? 'is-disabled' : '',
-      colorSize ? `el-color-picker--${ colorSize }` : ''
-    ]"
-    v-clickoutside="hide">
+    colorSize ? `el-color-picker--${colorSize}` : ''
+  ]" 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>
 
 <script>
-  import Color from './color';
-  import PickerDropdown from './components/picker-dropdown.vue';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Emitter from 'element-ui/src/mixins/emitter';
+import Color from './color';
+import PickerDropdown from './components/picker-dropdown.vue';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Emitter from 'element-ui/src/mixins/emitter';
 
-  export default {
+export default {
   name: 'ElColorPicker',
 
   mixins: [Emitter],
@@ -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;
@@ -155,13 +157,14 @@
 
       const { r, g, b } = color.toRgb();
       return showAlpha
-          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
-          : `rgb(${ r }, ${ g }, ${ b })`;
+        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`
+        : `rgb(${r}, ${g}, ${b})`;
     }
   },
 
   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
     };
@@ -184,5 +187,5 @@
   components: {
     PickerDropdown
   }
-  };
+};
 </script>