feat: 颜色选择器的clickoutside

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),