Просмотр исходного кода

feat(菜单): 添加菜单项显示控制功能

在BlogModule接口中添加showInMenu字段控制菜单项是否显示,并修改BlogMenu.vue组件只显示标记为showInMenu的模块。这样可以通过配置灵活控制哪些模块出现在菜单中,而不需要修改模板代码。
Sakulin 2 месяцев назад
Родитель
Сommit
c5d780fc9f
2 измененных файлов с 12 добавлено и 5 удалено
  1. 3 1
      src/layouts/BlogMenu.vue
  2. 9 4
      src/router/index.ts

+ 3 - 1
src/layouts/BlogMenu.vue

@@ -5,12 +5,14 @@ import { computed } from 'vue';
 
 const currentRouteName = computed(() => router.currentRoute.value.name);
 
+const ms = blogModules.filter(e => e.showInMenu);
+
 </script>
 
 <template>
 
 <div class="nav" >
-    <div class="module-wrapper" v-for="m of blogModules" :key="m.routeName" @click="router.push(m.routeUrl)">
+    <div class="module-wrapper" v-for="m of ms" :key="m.routeName" @click="router.push(m.routeUrl)">
         <div :class="(currentRouteName == m.routeName) ? ['active-icon-wrapper'] : ['icon-wrapper']">
             <div v-html="m.iconTemplate" class="module-icon-svg"/>
         </div>

+ 9 - 4
src/router/index.ts

@@ -9,6 +9,7 @@ interface BlogModule {
   iconTemplate?: string;
   description?: string;
   component: RouteComponent;
+  showInMenu: boolean;
 }
 
 export const modules: BlogModule[] = [
@@ -17,28 +18,32 @@ export const modules: BlogModule[] = [
     title: "主页",
     routeUrl: "/",
     iconTemplate: homeIcon.template,
-    component: () => import("../views/PostView.vue")
+    component: () => import("../views/PostView.vue"),
+    showInMenu: true
   },
   {
     routeName: "archives",
     title: "归档",
     routeUrl: "/archives",
     iconTemplate: archiveIcon.template,
-    component: () => import('../views/ArchivesView.vue')
+    component: () => import('../views/ArchivesView.vue'),
+    showInMenu: true
   },
   {
     routeName: "about",
     title: "关于",
     routeUrl: "/about",
     iconTemplate: aboutIcon.template,
-    component: () => import('../views/AboutView.vue')
+    component: () => import('../views/AboutView.vue'),
+    showInMenu: true
   },
   {
     routeName: "friend",
     title: "友链",
     routeUrl: "/friend",
     iconTemplate: friendIcon.template,
-    component: () => import('../views/FriendLinkView.vue')
+    component: () => import('../views/FriendLinkView.vue'),
+    showInMenu: true
   },
 ];