From 35b42d03ccd31e7dfbe4c5549bb0ebf50f6c1bce Mon Sep 17 00:00:00 2001
From: zhangyh <zhangyahui@haier.com>
Date: Wed, 24 Sep 2025 15:45:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E7=9A=84clickoutside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Detail/detailLeft/colorBox/pallet.vue     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/component/Detail/detailLeft/colorBox/pallet.vue b/src/component/Detail/detailLeft/colorBox/pallet.vue
index 24bab4a6..dfba93f1 100644
--- a/src/component/Detail/detailLeft/colorBox/pallet.vue
+++ b/src/component/Detail/detailLeft/colorBox/pallet.vue
@@ -42,7 +42,7 @@
     
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,watch,nextTick,onMounted,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,watch,nextTick,onMounted,onUnmounted,toRefs, reactive} from 'vue'
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { message,Upload} from 'ant-design-vue';
@@ -273,7 +273,24 @@ export default defineComponent({
 			}else{
 			}
 		}
+		// 点击外部区域关闭颜色选择器
+		const handleClickOutside = (event: Event) => {
+			const target = event.target as HTMLElement;
+			const colorSettingBlock = document.querySelector('.color_setting_block');
+			const palletColo = document.querySelector('.palletColo');
+			
+			// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
+			if (palletData.palletShow && colorSettingBlock && 
+				!colorSettingBlock.contains(target) && 
+				!palletColo?.contains(target)) {
+				palletData.palletShow = false;
+			}
+		}
+
 		onMounted(()=>{
+			// 添加点击外部区域监听器
+			document.addEventListener('click', handleClickOutside);
+			
 			nextTick().then(()=>{
 				const backIcon = document.createElement('div');
 				backIcon.classList.add('vc-sketch-color-wrap')
@@ -297,6 +314,11 @@ export default defineComponent({
 				})
 			})
 		})
+
+		onUnmounted(()=>{
+			// 清理事件监听器
+			document.removeEventListener('click', handleClickOutside);
+		})
         return{
 			...toRefs(palletData),
 			...toRefs(getpalletListDom),