fix: 修复超过三级的菜单只有一个子元素时菜单不提升bug

meadmin-cn · Jun 21, 2023 · 7abc316 · 7abc316
1 parent 41d5624
commit 7abc316
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/src/layout/components/menu/components/menuItem.vue b/src/layout/components/menu/components/menuItem.vue
@@ -1,49 +1,46 @@
 <template>
-  <template v-if="!item.meta?.hideMenu">
-    <template
-      v-if="
-        onlyOneChild && (!onlyOneChild.children?.length || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow
-      "
-    >
+  <template v-if="menu">
+    <el-sub-menu v-if="menu.children?.length" :index="menu.path">
+      <template v-if="menu.meta" #title>
+        <component :is="menu.meta!.icon" v-if="menu.meta!.icon" />
+        <span class="menu">{{ $t(menu.meta!.title!) }}</span>
+      </template>
+      <layout-menu-item v-for="child in menu.children" :key="child.path" :item="child"></layout-menu-item>
+    </el-sub-menu>
+    <template v-else>
       <component
-        :is="onlyOneChild.meta?.isLink ? 'a' : 'routerLink'"
-        v-if="onlyOneChild.meta && onlyOneChild.meta.title"
-        :href="onlyOneChild.path"
-        :to="onlyOneChild.path"
+        :is="menu.meta?.isLink ? 'a' : 'routerLink'"
+        v-if="menu.meta && menu.meta.title"
+        :href="menu.path"
+        :to="menu.path"
       >
-        <el-menu-item :index="onlyOneChild.path" :title="$t(onlyOneChild.meta.title)">
-          <component :is="onlyOneChild.meta.icon" v-if="onlyOneChild.meta.icon" />
+        <el-menu-item :index="menu.path" :title="$t(menu.meta.title)">
+          <component :is="menu.meta.icon" v-if="menu.meta.icon" />
           <template #title>
-            <span class="menu">{{ $t(onlyOneChild.meta.title) }}</span>
+            <span class="menu">{{ $t(menu.meta.title) }}</span>
           </template>
         </el-menu-item>
       </component>
     </template>
-    <el-sub-menu v-else :index="item.path">
-      <template v-if="item.meta" #title>
-        <component :is="item.meta!.icon" v-if="item.meta!.icon" />
-        <span class="menu">{{ $t(item.meta!.title!) }}</span>
-      </template>
-      <layout-menu-item v-for="child in item.children" :key="child.path" :item="child"></layout-menu-item>
-    </el-sub-menu>
   </template>
 </template>
 
 <script setup lang="ts" name="MenuItem">
 import { RouteRecordRaw } from 'vue-router';
 const props = defineProps<{ item: RouteRecordRaw }>();
-let onlyOneChild = ref<RouteRecordRaw>();
-const hasOneShowingChild = (children = [] as RouteRecordRaw[], parent: RouteRecordRaw) => {
-  const showingChildren = children.filter((item) => item.meta && !item.meta.hideMenu);
-  if (showingChildren.length === 1) {
-    onlyOneChild.value = showingChildren[0];
-    return true;
+const menu = ref<RouteRecordRaw>();
+const getMenu = (item: RouteRecordRaw): RouteRecordRaw => {
+  if (!item.children?.length) {
+    return item;
   }
-  if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, noShowingChildren: true };
-    return true;
+  const children = item.children.filter((v) => v.meta && !v.meta.hideMenu);
+  const res = { ...item, children: children };
+  if (!item.meta?.alwaysShow && children.length === 1) {
+    return getMenu(children[0]);
   }
-  return false;
+  return res;
 };
-hasOneShowingChild(props.item.children, props.item);
+if (!props.item.meta?.hideMenu) {
+  menu.value = getMenu(props.item);
+}
 </script>
diff --git a/src/router/routes/1-dashboard.ts b/src/router/routes/1-dashboard.ts
@@ -5,11 +5,19 @@ import { concatObjectValue } from '@/utils/helper';
 export const routes: RouteRecordRaw[] = [
   {
     path: PageEnum.HOME,
-    redirect: PageEnum.HOME + '/index',
+    redirect: PageEnum.HOME + '/index1',
     component: Layout,
-    children: concatObjectValue<RouteRecordRaw>(
-      import.meta.glob('./dashboard/*.ts', { eager: true, import: 'routes' }),
-    ),
-    meta: { title: '' },
+    children: [
+      {
+        path: 'index1',
+        redirect: PageEnum.HOME + '/index1/index',
+        component: Layout,
+        children: concatObjectValue<RouteRecordRaw>(
+          import.meta.glob('./dashboard/*.ts', { eager: true, import: 'routes' }),
+        ),
+        meta: { title: '首页2' },
+      },
+    ],
+    meta: { title: '首页1' },
   },
 ];
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
@@ -3,7 +3,6 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElLoading: typeof import('element-plus/es')['ElLoading']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']