From ab47b141c5647c3bdfed785d8bb3b1d31d796da0 Mon Sep 17 00:00:00 2001
From: zhanglongbao <993917246@qq.com>
Date: Mon, 12 Sep 2022 19:34:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(colorPicker):=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=89=93=E5=BC=80=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/color-picker/src/color-picker.tsx       | 15 ++++++++++-----
 .../devui/color-picker/src/utils/composeable.ts   |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/devui-vue/devui/color-picker/src/color-picker.tsx b/packages/devui-vue/devui/color-picker/src/color-picker.tsx
index 8441518a0d..fd53af98c6 100644
--- a/packages/devui-vue/devui/color-picker/src/color-picker.tsx
+++ b/packages/devui-vue/devui/color-picker/src/color-picker.tsx
@@ -11,7 +11,7 @@ import {
   readonly,
   Transition
 } from 'vue';
-import type { StyleValue } from 'vue';
+import type { StyleValue, Ref } from 'vue';
 import {
   useReactive,
   colorPickerResize,
@@ -58,16 +58,21 @@ export default defineComponent({
       emit('update:modelValue', value);
     }
     function resize() {
-      return colorPickerResize(colorCubeRef, top, left);
+      return colorPickerResize(colorCubeRef as Ref<HTMLElement>, top, left);
     }
     function isExhibition(event: Event) {
-      return isExhibitionColorPicker(event as PointerEvent, colorCubeRef, pickerRef, showColorPicker);
+      return isExhibitionColorPicker(
+        event as PointerEvent,
+        colorCubeRef as Ref<HTMLElement>,
+        pickerRef as Ref<HTMLElement>,
+        showColorPicker
+      );
     }
     onMounted(() => {
       // resize 响应式 colorpicker
       window.addEventListener('resize', resize);
       // 点击展示 colorpicker
-      window.addEventListener('click', isExhibition);
+      window.addEventListener('click', isExhibition, true);
     });
     // ** computeds
     // colorpicker panel 组件位置
@@ -152,7 +157,7 @@ export default defineComponent({
                 ]}
               ></div>
               <div class='devui-color-picker-color-value'>
-                <p style={textColor.value}>{formItemValue.value}</p>
+                <p style={textColor.value as StyleValue}>{formItemValue.value}</p>
               </div>
             </div>
           </div>
diff --git a/packages/devui-vue/devui/color-picker/src/utils/composeable.ts b/packages/devui-vue/devui/color-picker/src/utils/composeable.ts
index 64a1146af6..347a919636 100644
--- a/packages/devui-vue/devui/color-picker/src/utils/composeable.ts
+++ b/packages/devui-vue/devui/color-picker/src/utils/composeable.ts
@@ -17,7 +17,7 @@ export function isExhibitionColorPicker(
   pickerRef: Ref<HTMLElement | null>,
   showColorPicker: Ref<boolean>
 ): void {
-  if (colorCubeRef.value?.contains?.(event.target as Node)) {
+  if (colorCubeRef.value?.contains?.(event.target as Node) && !showColorPicker.value) {
     showColorPicker.value = true;
   }
   if (!!pickerRef.value && !pickerRef.value?.contains(event.target as Node)) {