fix: 点击色板颜色改变失效

Author: shuangxunian

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
 
 # Editor directories and files
 .vscode/*

src/components/colorPicker/Area/Picker/index.vue

@@ -1,93 +1,99 @@
 <template>
   <div ref="pickerAreaRef" class="spectrum-map" :style="pickerStyle">
-    <div class="spectrum"></div>
+    <div class="spectrum" @click="spectrumClick"></div>
     <div class="picker-cursor" :style="pointerStyle"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, computed } from 'vue'
-  import { clamp, isDefined, usePointerSwipe } from '@vueuse/core'
-  import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue"
+import { clamp, isDefined, usePointerSwipe } from "@vueuse/core"
+import { Color } from "@/utils/color/color"
 
-  const props = defineProps<{
-    red: number
-    green: number
-    blue: number
-    alpha: number
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-  }>()
+const props = defineProps<{
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>()
 
-  const pickerAreaRef = ref<HTMLDivElement>()
+const pickerAreaRef = ref<HTMLDivElement>()
 
-  const state = reactive({
-    width: 0,
-    height: 0,
-  })
+const state = reactive({
+  width: 0,
+  height: 0
+})
 
-  const offsetLeft = computed(() => {
-    return Math.round(props.saturation * state.width - 8)
-  })
+const offsetLeft = computed(() => {
+  return Math.round(props.saturation * state.width - 8)
+})
 
-  const offsetTop = computed(() =>
-    Math.max(Math.round(state.height - props.value * state.height - 14), -6),
-  )
+const offsetTop = computed(() =>
+  Math.max(Math.round(state.height - props.value * state.height - 14), -6)
+)
 
-  const pointerStyle = computed(() => {
-    return {
-      backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
-      left: `${offsetLeft.value}px`,
-      top: `${offsetTop.value}px`,
-    }
-  })
+const pointerStyle = computed(() => {
+  return {
+    backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
+    left: `${offsetLeft.value}px`,
+    top: `${offsetTop.value}px`
+  }
+})
 
-  const pickerStyle = computed(() => {
-      const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const color = new Color(new HSVA(props.hue, 1, 1, 1))
-    // const { r, g, b } = color.rgba
-    return {
-      backgroundColor: color.rgb,
-    }
-  })
+const pickerStyle = computed(() => {
+  const color = new Color(`hsva(${props.hue},1,1,1)`)
+  // const color = new Color(new HSVA(props.hue, 1, 1, 1))
+  // const { r, g, b } = color.rgba
+  return {
+    backgroundColor: color.rgb
+  }
+})
 
-  onMounted(() => {
-    if (isDefined(pickerAreaRef)) {
-      state.width = pickerAreaRef.value.clientWidth
-      state.height = pickerAreaRef.value.clientHeight
-    }
-  })
+onMounted(() => {
+  if (isDefined(pickerAreaRef)) {
+    state.width = pickerAreaRef.value.clientWidth
+    state.height = pickerAreaRef.value.clientHeight
+  }
+})
 
-  let rect: DOMRect | undefined
+let rect: DOMRect | undefined
 
-  const getColor = () => {
-    if (!isDefined(rect)) return
-    let x = clamp(posEnd.x - rect.x, 0, state.width)
-    let y = clamp(posEnd.y - rect.y, 0, state.height)
-    const saturation = x / state.width
-    const value = 1 - y / state.height
-      const color = new Color(`hsva(${props.hue},${saturation},${value},${props.alpha})`)
-    // const color = new Color(new HSVA(props.hue, saturation, value, props.alpha))
-    return {
-      ...color.getRgba(),
-      saturation,
-      value,
-    }
+const getColor = () => {
+  if (!isDefined(rect)) return
+  let x = clamp(posEnd.x - rect.x, 0, state.width)
+  let y = clamp(posEnd.y - rect.y, 0, state.height)
+  const saturation = x / state.width
+  const value = 1 - y / state.height
+  const color = new Color(
+    `hsva(${props.hue},${saturation},${value},${props.alpha})`
+  )
+  // const color = new Color(new HSVA(props.hue, saturation, value, props.alpha))
+  return {
+    ...color.getRgba(),
+    saturation,
+    value
   }
+}
+
+const spectrumClick = (obj: any) => {
+  props.updateColor(getColor(), "onChange")
+}
 
-  const { posEnd } = usePointerSwipe(pickerAreaRef, {
-    threshold: 0,
-    onSwipeStart() {
-      rect = pickerAreaRef.value?.getBoundingClientRect()
-      props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-      props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-      props.updateColor(getColor(), 'onEndChange')
-    },
-  })
+const { posEnd } = usePointerSwipe(pickerAreaRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = pickerAreaRef.value?.getBoundingClientRect()
+    props.updateColor(getColor(), "onStartChange")
+  },
+  onSwipe() {
+    props.updateColor(getColor(), "onChange")
+  },
+  onSwipeEnd() {
+    props.updateColor(getColor(), "onEndChange")
+  }
+})
 </script>