From 194162804ec5acffed17fd0890f5bc69d07cc7c8 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 10 Jul 2023 09:45:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E6=8C=89=E4=B8=8B=E6=8B=96=E6=8B=BD=E9=80=89=E7=82=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ColorPalette.vue               | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/views/spectrumAnalysis/components/ColorPalette.vue b/src/views/spectrumAnalysis/components/ColorPalette.vue
index fbaf851..80ce3ff 100644
--- a/src/views/spectrumAnalysis/components/ColorPalette.vue
+++ b/src/views/spectrumAnalysis/components/ColorPalette.vue
@@ -4,6 +4,10 @@
     class="color-palette"
     :style="{ width: circleWidth + 'px', height: circleWidth + 'px' }"
     @click="handleClick"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseout="handleMouseOut"
   >
     <span
       ref="dotElemRef"
@@ -43,11 +47,38 @@ export default {
       dotPosition: {
         x: 0,
         y: 0
-      }
+      },
+      isMouseDown: false
     }
   },
   methods: {
     handleClick({ offsetX, offsetY }) {
+      this.setPositionByMouseEvent(offsetX, offsetY)
+    },
+
+    // 鼠标按下
+    handleMouseDown({ offsetX, offsetY }) {
+      this.setPositionByMouseEvent(offsetX, offsetY)
+      this.isMouseDown = true
+    },
+
+    handleMouseMove({ offsetX, offsetY }) {
+      if (this.isMouseDown) {
+        this.setPositionByMouseEvent(offsetX, offsetY)
+      }
+    },
+
+    // 鼠标抬起
+    handleMouseUp() {
+      this.isMouseDown = false
+    },
+
+    // 鼠标移开
+    handleMouseOut() {
+      this.isMouseDown = false
+    },
+
+    setPositionByMouseEvent(offsetX, offsetY) {
       const { degree, radian } = this.getDegree([offsetX, offsetY])
       for (let index = 0; index < this.range; index++) {
         if (degree >= this.perDegree * index && degree < this.perDegree * (index + 1)) {