From 243e605f1062d5da74a8973bf163c562363f1a69 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 27 May 2021 22:54:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=96=E8=89=B2=E5=99=A8=20Hue=20?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E5=BC=82=E5=B8=B8=EF=BC=8C=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E9=A2=84=E7=BD=AE=E9=A2=9C=E8=89=B2=20Hue=20=E4=B8=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker/Hue.vue        |  4 ++--
 src/components/ColorPicker/Saturation.vue |  2 +-
 src/components/ColorPicker/index.vue      | 14 ++++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index d6e239bb..eac96d71 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -37,7 +37,7 @@ export default defineComponent({
     
     const color = computed(() => {
       const hsla = tinycolor(props.value).toHsl()
-      if (props.hue) hsla.h = props.hue
+      if (props.hue !== -1) hsla.h = props.hue
       return hsla
     })
 
@@ -70,7 +70,7 @@ export default defineComponent({
         percent = left * 100 / containerWidth
         h = 360 * percent / 100
       }
-      if (color.value.h !== h) {
+      if (props.hue === -1 || color.value.h !== h) {
         emit('colorChange', {
           h,
           l: color.value.l,
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index a6caeb10..a86a6677 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -39,7 +39,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const color = computed(() => {
       const hsva = tinycolor(props.value).toHsv()
-      if (props.hue) hsva.h = props.hue
+      if (props.hue !== -1) hsva.h = props.hue
       return hsva
     })
 
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index df1603c5..2c6e75d0 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -140,7 +140,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const hue = ref(0)
+    const hue = ref(-1)
     const recentColors = ref<string[]>([])
 
     const color = computed({
@@ -162,6 +162,7 @@ export default defineComponent({
     })
 
     const selectPresetColor = (colorString: string) => {
+      hue.value = tinycolor(colorString).toHsl().h
       emit('update:modelValue', colorString)
     }
 
@@ -189,9 +190,14 @@ export default defineComponent({
     })
 
     const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
-      if ('h' in value && 'l' in value) hue.value = value.h
-      if ('h' in value) color.value = tinycolor(value).toRgb()
-      else color.value = value
+      if ('h' in value) {
+        hue.value = value.h
+        color.value = tinycolor(value).toRgb()
+      }
+      else {
+        hue.value = tinycolor(value).toHsl().h
+        color.value = value
+      }
 
       updateRecentColorsCache()
     }