优化：商户后台更换颜色选择器组件

package.json

@@ -22,8 +22,8 @@
     "md5": "^2.2.1",
     "moment": "^2.27.0",
     "nprogress": "^0.2.0",
+    "one-colorpicker": "^1.0.12",
     "store": "^2.0.12",
-    "vcolorpicker": "^1.0.3",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.2.1",

src/core/lazy_use.js

@@ -61,6 +61,7 @@ import Tree from '@/components/tree'
 // ext library
 import VueClipboard from 'vue-clipboard2'
 import Dialog from '@/components/Dialog'
+import MyColorPicker from '@/components/MyColorPicker'
 // import MultiTab from '@/components/MultiTab'
 import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
@@ -129,6 +130,7 @@ Vue.use(Dialog) // this.$dialog func
 Vue.use(PageLoading)
 Vue.use(PermissionHelper)
 Vue.use(VueClipboard)
+Vue.use(MyColorPicker)
 
 Vue.use(Pagination)
 Vue.use(Empty)

src/layouts/ProLayout/BasicLayout.less

@@ -111,7 +111,7 @@
     }
   }
 
-  .color-picker {
-    margin: 10px 0;
-  }
+  // .color-picker {
+  //   margin: 10px 0;
+  // }
 }

src/views/page/modules/editor/Editor.vue

@@ -1268,7 +1268,7 @@
                     class="rest-color"
                     @click="onEditorResetColor(curItem.style, 'background', '#fff')"
                   >重置</span>
-                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
+                  <MyColorPicker v-model="curItem.style.background" defaultColor="#fff" />
                 </div>
               </div>
             </div>
@@ -1291,7 +1291,7 @@
                     class="rest-color"
                     @click="onEditorResetColor(curItem.style, 'couponBgColor', '#ffa708')"
                   >重置</span>
-                  <colorPicker v-model="curItem.style.couponBgColor" defaultColor="#ffa708" />
+                  <MyColorPicker v-model="curItem.style.couponBgColor" defaultColor="#ffa708" />
                 </div>
               </div>
               <div class="block-item">
@@ -1301,7 +1301,7 @@
                     class="rest-color"
                     @click="onEditorResetColor(curItem.style, 'couponTextColor', '#ffffff')"
                   >重置</span>
-                  <colorPicker v-model="curItem.style.couponTextColor" defaultColor="#ffffff" />
+                  <MyColorPicker v-model="curItem.style.couponTextColor" defaultColor="#ffffff" />
                 </div>
               </div>
               <div class="block-item">
@@ -1311,7 +1311,7 @@
                     class="rest-color"
                     @click="onEditorResetColor(curItem.style, 'receiveBgColor', '#717070')"
                   >重置</span>
-                  <colorPicker v-model="curItem.style.receiveBgColor" defaultColor="#717070" />
+                  <MyColorPicker v-model="curItem.style.receiveBgColor" defaultColor="#717070" />
                 </div>
               </div>
               <div class="block-item">
@@ -1321,7 +1321,7 @@
                     class="rest-color"
                     @click="onEditorResetColor(curItem.style, 'receiveTextColor', '#ffffff')"
                   >重置</span>
-                  <colorPicker v-model="curItem.style.receiveTextColor" defaultColor="#ffffff" />
+                  <MyColorPicker v-model="curItem.style.receiveTextColor" defaultColor="#ffffff" />
                 </div>
               </div>
             </div>
@@ -1643,15 +1643,12 @@
 
 <script>
 import Vue from 'vue'
-import vcolorpicker from 'vcolorpicker'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import draggable from 'vuedraggable'
 import { inArray } from '@/utils/util'
 import { Ueditor, SelectCategory } from '@/components'
 import { SImage, SArticleCate, SGoods, SLink, SHotZone, SCoupon } from './modules'
 
-Vue.use(vcolorpicker)
-
 export default {
   props: {
     // 页面装修默认数据

src/views/page/modules/editor/style.less

@@ -177,28 +177,6 @@
     color: @primary-color  !important;
   }
 
-  // 颜色选择组件
-  .m-colorPicker {
-    display: block;
-    background-color: #ffffff;
-    border: 1px solid #efefef;
-    padding: 5px;
-    width: 61px;
-
-    /deep/.colorBtn {
-      cursor: pointer;
-      width: 48px;
-      height: 20px;
-      border: 1px solid #000;
-    }
-
-    /deep/.box {
-      left: -152px;
-      top: 35px;
-      z-index: 9999;
-    }
-  }
-
 }
 
 // 多选框

src/views/store/style/Theme.vue

@@ -35,9 +35,9 @@
                 </a-radio-group>
               </a-form-model-item>
               <a-form-model-item label="主背景">
-                <div class="color-picker">
-                  <colorPicker v-model="record.data.mainBg" defaultColor="#fff" />
-                  <colorPicker
+                <div class="color-picker-row">
+                  <MyColorPicker v-model="record.data.mainBg" defaultColor="#fff" />
+                  <MyColorPicker
                     v-if="record.data.gradualChange"
                     v-model="record.data.mainBg2"
                     defaultColor="#fff"
@@ -45,14 +45,14 @@
                 </div>
               </a-form-model-item>
               <a-form-model-item label="主文字">
-                <div class="color-picker">
-                  <colorPicker v-model="record.data.mainText" defaultColor="#fff" />
+                <div class="color-picker-row">
+                  <MyColorPicker v-model="record.data.mainText" defaultColor="#fff" />
                 </div>
               </a-form-model-item>
               <a-form-model-item label="副背景">
-                <div class="color-picker">
-                  <colorPicker v-model="record.data.viceBg" defaultColor="#fff" />
-                  <colorPicker
+                <div class="color-picker-row">
+                  <MyColorPicker v-model="record.data.viceBg" defaultColor="#fff" />
+                  <MyColorPicker
                     v-if="record.data.gradualChange"
                     v-model="record.data.viceBg2"
                     defaultColor="#fff"
@@ -60,8 +60,8 @@
                 </div>
               </a-form-model-item>
               <a-form-model-item label="副文字">
-                <div class="color-picker">
-                  <colorPicker v-model="record.data.viceText" defaultColor="#fff" />
+                <div class="color-picker-row">
+                  <MyColorPicker v-model="record.data.viceText" defaultColor="#fff" />
                 </div>
               </a-form-model-item>
             </div>
@@ -133,14 +133,11 @@
 
 <script>
 import Vue from 'vue'
-import vcolorpicker from 'vcolorpicker'
 import { cloneDeep } from 'lodash'
 import * as Api from '@/api/setting/store'
 import { SettingEnum } from '@/common/enum/store'
 import { ColorRadio } from './modules'
 
-Vue.use(vcolorpicker)
-
 // 默认数据
 const defaultData = {
   mode: 10,
@@ -540,30 +537,12 @@ export default {
 }
 
 // 颜色选择组件
-.color-picker {
-  // height: 39.9999px;
+.color-picker-row {
+  margin-top: 5px;
   display: flex;
   align-items: center;
-  margin: 0;
-  .m-colorPicker {
-    display: block;
-    background-color: #ffffff;
-    border: 1px solid #d9d9d9;
-    padding: 6px 5px;
-    width: 66px;
-    margin-right: 15px;
-
-    /deep/.colorBtn {
-      cursor: pointer;
-      width: 53px;
-      height: 20px;
-      border: 1px solid #000;
-    }
-
-    /deep/.box {
-      left: -152px;
-      top: 35px;
-    }
+  .color-picker {
+    margin-right: 10px;
   }
 }
 </style>

yarn.lock

@@ -6253,11 +6253,6 @@ highlight.js@^10.7.1:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
-highlight.js@^9.12.0:
-  version "9.18.5"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
-  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8723,6 +8718,13 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+one-colorpicker@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.npmmirror.com/one-colorpicker/-/one-colorpicker-1.0.12.tgz#05f2542c62767f9bc8720016d920c29f0667ce49"
+  integrity sha512-WN+YxG8xUQPKHroRLvCW9cgTXQATM5WFccpGdb6kZ9NKoQIl/g4cxh40IajIcqIwjcwBFF4FFIEC6S26pYaXCw==
+  dependencies:
+    tinycolor2 "^1.4.1"
+
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
@@ -11592,14 +11594,6 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vcolorpicker@^1.0.3:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vcolorpicker/-/vcolorpicker-1.1.0.tgz#527e2463ab330faab8b9637a30f915aebbef75f6"
-  integrity sha512-FbI7rq0EliwaPU8Qh/QVv9MFdZnG3dHjZEvODIcpPS774TTvilg6tq6cWDRbtCITBNDdpgVWnNlJ0aKnecgrJg==
-  dependencies:
-    highlight.js "^9.12.0"
-    vue "^2.5.17"
-
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"