feat: 增加鼠标按下拖拽选点功能

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)) {