!28 修复menu mode 切换到horizontal时菜单显示问题

Merge pull request !28 from liangxinyu/fix-menuMode

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>