fix: 颜色实时更新

ymm-tech · Mar 20, 2020 · 9f472b3 · 9f472b3
1 parent 3582df7
commit 9f472b3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/components/style/Base.vue b/src/components/style/Base.vue
@@ -35,7 +35,8 @@
                 <a style="float: right; font-size: 13px;" class="iconfont icon-info-light" :title="item.desc"></a>
               </el-option>
             </el-select>
-            <el-color-picker v-model="info['border-color']" @active-change="colorChange" show-alpha></el-color-picker>
+            <y-color-picker v-model="info['border-color']" show-alpha></y-color-picker>
+
             </div>
           </el-form-item>
           <el-form-item label="宽度">
@@ -73,7 +74,7 @@
             </div>
           </el-form-item>
           <el-form-item label="阴影颜色">
-            <el-color-picker v-model="boxShadow.color" @active-change="colorChange" show-alpha></el-color-picker>
+            <y-color-picker v-model="boxShadow.color" show-alpha></y-color-picker>
           </el-form-item>
         </el-form>
       </el-collapse-item>
@@ -130,13 +131,14 @@
   import Num from './Num'
   import EditorPosition from './Position'
   import EditorText from './Text'
-
   import {isNullOrUndefined} from '../../assets/js/common'
+  import YColorPicker from './ColorPicker'
+
 
   export default {
     mixins: [BaseComponent],
     name: 'BaseStyleEditor',
-    components: {Num, EditorBackground, Align, EditorPosition, EditorText},
+    components: {Num, EditorBackground, Align, EditorPosition, EditorText, YColorPicker},
     props: {
       info: {
         required: true,

diff --git a/src/components/style/ColorPicker.vue b/src/components/style/ColorPicker.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="color-picker-wrapper">
     <el-input v-model="rawColor" size="mini">
-      <el-color-picker slot="prefix" size="mini" v-model="rawColor" show-alpha></el-color-picker>
+      <el-color-picker
+        slot="prefix"
+        size="mini"
+        v-model="rawColor"
+        @active-change="changeColor"
+        show-alpha
+      ></el-color-picker>
     </el-input>
   </div>
 </template>
@@ -10,6 +16,7 @@
     .el-input--prefix .el-input__inner {
       padding-left: 36px;
     }
+
     .el-color-picker__trigger {
       border: none;
     }
@@ -18,7 +25,7 @@
 
 <script type="text/ecmascript-6">
   import BaseComponent from 'src/extend/BaseComponent'
-  import { isNullOrUndefined } from '../../assets/js/common'
+  import {isNullOrUndefined} from '../../assets/js/common'
   export default {
     mixins: [BaseComponent],
     name: 'ColorPicker',
@@ -49,6 +56,9 @@
       }
     },
     methods: {
+      changeColor (color) {
+        this.rawColor = color
+      },
       isHex (val) {
         var reg = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{8}$/
         return reg.test((val || '').trim())