From f2c519e3e4ef61c44b2a8e9cc2507dde1819dffa Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 21 Dec 2023 14:07:19 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E6=9B=B4=E5=A4=9A=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=97=B6=E6=97=A0=E6=B3=95=E6=AD=A3=E7=A1=AE=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/color-picker/src/index.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/color-picker/src/index.vue b/packages/color-picker/src/index.vue
index cd8faa9..f0f5d76 100644
--- a/packages/color-picker/src/index.vue
+++ b/packages/color-picker/src/index.vue
@@ -59,7 +59,12 @@ const colorConfig = [
   ]
 // 标准颜色
 const bColor = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d']
-const html5Color = props.modelValue
+const html5Color = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    updataValue(value)
+  }
+})
 // 计算属性：显示面板颜色
 const showPanelColor = computed(() => {
   if (hoveColor.value) {
@@ -93,7 +98,6 @@ const triggerHtml5Color = () => {
 const updataValue = (value: string) => {
   emits('update:modelValue', value)
   emits('change', value)
-  openStatus.value = false
 }
 // 设置默认颜色
 const handleDefaultColor = () => {
@@ -202,8 +206,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
         <!-- 用以激活HTML5颜色面板 -->
         <input type="color"
           ref="html5ColorEl"
-          v-model="html5Color"
-          @change="updataValue(html5Color)">
+          v-model="html5Color">
       </div>
     </div>
   </div>

From 54ae7a4fec419a2c423b0efa21d3fd7551c5f90e Mon Sep 17 00:00:00 2001
From: Floyd Li <floyd.li@outlook.com>
Date: Thu, 21 Dec 2023 14:08:03 +0800
Subject: [PATCH 2/2] typo: updataValue -> updateValue

---
 packages/color-picker/src/index.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/color-picker/src/index.vue b/packages/color-picker/src/index.vue
index f0f5d76..3399455 100644
--- a/packages/color-picker/src/index.vue
+++ b/packages/color-picker/src/index.vue
@@ -62,7 +62,7 @@ const bColor = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57'
 const html5Color = computed({
   get: () => props.modelValue,
   set: (value) => {
-    updataValue(value)
+    updateValue(value)
   }
 })
 // 计算属性：显示面板颜色
@@ -95,13 +95,13 @@ const triggerHtml5Color = () => {
   html5ColorEl.value?.click()
 }
 // 更新组件的值
-const updataValue = (value: string) => {
+const updateValue = (value: string) => {
   emits('update:modelValue', value)
   emits('change', value)
 }
 // 设置默认颜色
 const handleDefaultColor = () => {
-  updataValue(props.defaultColor)
+  updateValue(props.defaultColor)
 }
 
 /**
@@ -174,7 +174,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
             :style="{ backgroundColor: color }"
             @mouseover="handleOver(color)"
             @mouseout="handleOver('')"
-            @click="updataValue(color)"
+            @click="updateValue(color)"
           ></li>
         </ul>
         <ul class="bColor">
@@ -186,7 +186,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
                 :style="{ backgroundColor: color }"
                 @mouseover="handleOver(color)"
                 @mouseout="handleOver('')"
-                @click="updataValue(color)"
+                @click="updateValue(color)"
               ></li>
             </ul>
           </li>
@@ -199,7 +199,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
             :style="{ backgroundColor: color }"
             @mouseover="handleOver(color)"
             @mouseout="handleOver('')"
-            @click="updataValue(color)"
+            @click="updateValue(color)"
           ></li>
         </ul>
         <h3 @click="triggerHtml5Color">更多颜色...</h3>