From ad63efebc77608225b43409afcae64010f72f193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 29 Aug 2024 15:52:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 4916bcf2..69311aa0 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -3,8 +3,8 @@
         <div class="decorate-cube">
             <ul v-for="(n, index) in densityNum" :key="index" class="cube-col">
                 <li v-for="(i, index1) in densityNum" :key="index1" class="cube-item" :style="{ width: cubeCellWidth + 'px', height: cubeCellHeight + 'px' }" :data-x="n" :data-y="i" @click="onClickCubeItem($event)" @mouseenter="onEnterCubeItem($event)">
-                    <div :class="['w h item', { 'item-selecting': isSelecting(n, i), 'item-selected': isSelected(n, i) }]">
-                        <icon name="add" color="9" :style="{ 'line-height': cubeCellHeight + 'px' }"></icon>
+                    <div :class="['w h item do-not-trigger', { 'item-selecting': isSelecting(n, i), 'item-selected': isSelected(n, i) }]">
+                        <icon name="add" color="9" class="do-not-trigger" :style="{ 'line-height': cubeCellHeight + 'px' }"></icon>
                     </div>
                 </li>
             </ul>
@@ -70,6 +70,7 @@ const selected_active = ref(0);
 //#region 容器大小变更
 const density = ref('4');
 //#endregion
+
 const selectingItem = reactive<any>({
     tempStart: null,
     tempEnd: null,
@@ -77,6 +78,21 @@ const selectingItem = reactive<any>({
     end: null,
 });
 
+onMounted(() => {
+    // 监听点击事件
+    document.addEventListener('click', outerClick);
+});
+onUnmounted(() => {
+    // 移除监听事件
+    document.removeEventListener('click', outerClick);
+});
+// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
+const outerClick = (e: any) => {
+    if (!e.target.className.includes('do-not-trigger')) {
+        clearSelecting();
+    }
+};
+
 const selectedList = ref(props.list);
 
 //单元魔方宽度。