From 8d74199a721e0b22f0fcdb36f8bcbdba5cdff200 Mon Sep 17 00:00:00 2001
From: fanpeijiang <1121903167@qq.com>
Date: Thu, 13 Oct 2022 21:58:08 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=8F=9C=E5=8D=95=E6=A0=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LeftMenuBar.vue | 89 ++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/components/LeftMenuBar.vue b/src/components/LeftMenuBar.vue
index c16c9cd1..3d9e13b8 100644
--- a/src/components/LeftMenuBar.vue
+++ b/src/components/LeftMenuBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-bar">
+  <div class="menu-bar" v-click-outside="clickOutside">
     <div class="menu-bar-item" v-for="(item, i) in menus" :key="i">
       <div class="menu-bar-no-child">
         <!-- <img
@@ -41,25 +41,25 @@
           v-for="(child, childIndex) in item.children"
           :key="childIndex"
         >
-        <div class="menu-bar-item-parent"> 
+          <div class="menu-bar-item-parent">
             <div
-            class="menu-bar-item-main"
-            :style="{
-              background: child.check ? 'rgba(112, 185, 54, 0.1)' : '#ffffff',
-              color: child.check ? '#70b936' : '#000000',
-              height: '32px',
-              margin: '10px 0',
-              borderRadius: '0',
-            }"
-            @click="childCheck(child, i)"
-          >
-            <div class="menu-bar-item-main-icon">
-              <i class="iconfont" v-html="child.icon"></i>
+              class="menu-bar-item-main"
+              :style="{
+                background: child.check ? 'rgba(112, 185, 54, 0.1)' : '#ffffff',
+                color: child.check ? '#70b936' : '#000000',
+                height: '32px',
+                margin: '10px 0',
+                borderRadius: '0',
+              }"
+              @click="childCheck(child, i)"
+            >
+              <div class="menu-bar-item-main-icon">
+                <i class="iconfont" v-html="child.icon"></i>
+              </div>
+              <div class="menu-bar-item-main-text">{{ child[property] }}</div>
             </div>
-            <div class="menu-bar-item-main-text">{{ child[property] }}</div>
           </div>
         </div>
-        </div>
       </div>
     </div>
   </div>
@@ -100,7 +100,7 @@ export default {
       });
       return first;
     });
-    const { parentCheck, childCheck } = domHandle(menus, context);
+    const { parentCheck, childCheck, clickOutside } = domHandle(menus, context);
     watch(
       () => route.path,
       () => {
@@ -133,7 +133,7 @@ export default {
           $checkDom.style.height = item.unfold
             ? `${$checkDom.scrollHeight}px`
             : 0;
-            $checkDom.style.borderRadius = item.unfold || 0
+          $checkDom.style.borderRadius = item.unfold || 0;
           return;
         }
         if (item.check) return;
@@ -151,9 +151,22 @@ export default {
         index.value = i;
         menusStatusToFalsefather(menus);
       };
+      const clickOutside = () => {
+        menus.forEach((x) => {
+          if (x.children && x.unfold) {
+            x.unfold = false;
+            const menuChild$ = document.querySelectorAll(".menu-bar-has-child");
+            for (let index = 0; index < menuChild$.length; index++) {
+              const element = menuChild$[index];
+              element.style.height = 0;
+            }
+          }
+        });
+      };
       return {
         parentCheck,
         childCheck,
+        clickOutside,
       };
     }
     return {
@@ -161,6 +174,7 @@ export default {
       index,
       parentCheck,
       childCheck,
+      clickOutside,
     };
   },
 };
@@ -198,6 +212,9 @@ function menusStatusToFalsefather(menus) {
     background: rgba(245, 245, 245, 0.6);
     &-child {
       background-color: #ffffff;
+      .menu-bar-item-main-text{
+        width: 68px;
+      }
     }
     &-img {
       width: 10px;
@@ -280,24 +297,24 @@ function menusStatusToFalsefather(menus) {
   position: relative;
   z-index: 99;
 }
-.menu-bar-item-child{
-height: 50px;
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    /* background: #ffffff; */
-    z-index: 999;
+.menu-bar-item-child {
+  height: 50px;
+  display: block;
+  position: relative;
+  top: 0;
+  left: 0;
+  /* background: #ffffff; */
+  z-index: 999;
 }
-.menu-bar-item-parent{
- height: 50px;
-    position: absolute;
-    z-index: 999;
-    left: 0;
-    top: 0;
-    background: #ffffff;
-    opacity: 1;
-    z-index: 100;
-    height: 50px;
+.menu-bar-item-parent {
+  height: 50px;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  background: #ffffff;
+  opacity: 1;
+  z-index: 100;
+  height: 50px;
 }
 </style>