From 85ff5871d1c604ccc46064ae542c1e9cfe0e21cf Mon Sep 17 00:00:00 2001
From: June <1601745371@qq.com>
Date: Wed, 4 Oct 2023 13:14:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E7=9A=84=E6=89=A7=E8=A1=8C=E9=A2=91=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 src/components/colorSelector.vue | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 074cce55..06a40219 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@vueuse/core": "^10.1.0",
     "axios": "^1.3.4",
-    "color-gradient-picker-vue3": "^2.0.1",
+    "color-gradient-picker-vue3": "^2.0.3",
     "events": "^3.3.0",
     "fabric": "^5.2.1",
     "fontfaceobserver": "^2.1.0",
diff --git a/src/components/colorSelector.vue b/src/components/colorSelector.vue
index 35405a7a..2a7231dc 100644
--- a/src/components/colorSelector.vue
+++ b/src/components/colorSelector.vue
@@ -20,15 +20,14 @@
     <div v-if="isGradient">
       <div class="gradient-bar" :style="bgStr"></div>
       <!-- 颜色插件 -->
-      <div class="ivu-poptip-popper ivu-poptip-inner">
-        <gradientColorPicker
-          :is-gradient="true"
-          :gradient="currentGradient"
-          @change="changeGradientColor"
-          :cancel-text="$t('cancel')"
-          :confirm-text="$t('ok')"
-        />
-      </div>
+
+      <gradientColorPicker
+        :is-gradient="true"
+        :gradient="currentGradient"
+        @change="changeGradientColor"
+        :cancel-text="$t('cancel')"
+        :confirm-text="$t('ok')"
+      />
     </div>
 
     <!-- 纯色选择器 -->
@@ -41,6 +40,7 @@ import 'color-gradient-picker-vue3/dist/style.css';
 import gradientColorPicker from 'color-gradient-picker-vue3';
 import { fabric } from 'fabric';
 import useSelect from '@/hooks/select';
+import { debounce } from 'lodash-es';
 const { canvasEditor } = useSelect();
 const generateFabricGradientFromColorStops = (handlers, width, height, orientation, angle) => {
   // 角度转换坐标
@@ -109,6 +109,8 @@ const emitChange = defineEmits(['change']);
 // const poptipCreated = ref(false);
 // 是否渐变
 const isGradient = ref(false);
+// 是否显示渐变
+const showGradient = ref(false);
 // 纯色
 const fill = ref('');
 // 渐变
@@ -153,7 +155,7 @@ const checkColor = (val) => {
     }
   }
 };
-const changeGradientColor = (val) => {
+const changeGradientColor = debounce(function (val) {
   const activeObject = canvasEditor.canvas.getActiveObjects()[0];
   const { gradient } = val;
   if (activeObject) {
@@ -165,7 +167,7 @@ const changeGradientColor = (val) => {
     activeObject.set(props.angleKey, gradient.degree);
     setGradientBar(val);
   }
-};
+}, 500);
 // 设置渐变颜色条
 const setGradientBar = (val) => {
   if (val.gradient.type === 'linear') {