From 1704d79990f10fa3364bf1e023f84e03fa25d1e5 Mon Sep 17 00:00:00 2001
From: Time Lord <2393686479@qq.com>
Date: Sun, 11 Aug 2024 08:34:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=88=B0horizontal=E6=97=B6=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/components/SidebarMenu.vue        | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/layout/components/Sidebar/components/SidebarMenu.vue b/src/layout/components/Sidebar/components/SidebarMenu.vue
index 418c9cda..526a24ce 100644
--- a/src/layout/components/Sidebar/components/SidebarMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMenu.vue
@@ -1,6 +1,7 @@
 <!-- 左侧边菜单：包括左侧布局(left)、顶部布局(all)、混合布局(left) -->
 <template>
   <el-menu
+    ref="menuRef"
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
     :background-color="variables['menu-background']"
@@ -9,6 +10,8 @@
     :unique-opened="false"
     :collapse-transition="false"
     :mode="mode"
+    @open="handleOpen"
+    @close="handleClose"
   >
     <SidebarMenuItem
       v-for="route in menuList"
@@ -25,7 +28,9 @@ import { isExternal } from "@/utils/index";
 import path from "path-browserify";
 import variables from "@/styles/variables.module.scss";
 import { LayoutEnum } from "@/enums/LayoutEnum";
+import type { MenuInstance } from "element-plus";
 
+const menuRef = ref<MenuInstance>();
 const settingsStore = useSettingsStore();
 const appStore = useAppStore();
 const currentRoute = useRoute();
@@ -63,4 +68,22 @@ function resolvePath(routePath: string) {
   const fullPath = path.resolve(props.basePath, routePath);
   return fullPath;
 }
+/**
+ * 修复切换到horizontal时，展开的菜单显示问题，切换时关闭全部菜单
+ */
+const menuIndexArray = ref<string[]>([]);
+const handleOpen = (index: string, keyPath: string[]) => {
+  menuIndexArray.value.push(index);
+};
+const handleClose = (index: string) => {
+  menuIndexArray.value = menuIndexArray.value.filter((item) => item !== index);
+};
+watch(
+  () => mode.value,
+  () => {
+    if (mode.value === "horizontal") {
+      menuIndexArray.value.map((item: string) => menuRef.value!.close(item));
+    }
+  }
+);
 </script>
-- 
Gitee