github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: render routes menu icon 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-13 11:28:03 +08:00
parent 0324e02605
commit d9273cabdf
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/base/menu/RoutesMenu.tsx
View File

@ -1,5 +1,5 @@
import { computed, defineComponent } from "vue";
import type { PropType } from "vue";
import type { PropType, Component } from "vue";
import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
import { useRoute, useRouter } from "vue-router";
@ -24,12 +24,25 @@ const VRoutesMenu = defineComponent({
await push(id);
}
function renderIcon(icon: Component | undefined) {
if (!icon) return undefined;
return <icon height="20px" width="20px" />;
}
function renderItems(items: MenuItemType[] | undefined) {
return items?.map((item) => {
return (
<>
{item.children?.length ? (
<VMenuItem key={item.path} id={item.path} title={item.name}>
<VMenuItem
key={item.path}
id={item.path}
title={item.name}
v-slots={{
icon: () => renderIcon(item.icon),
}}
>
{renderItems(item.children)}
</VMenuItem>
) : (
@ -37,6 +50,9 @@ const VRoutesMenu = defineComponent({
key={item.path}
id={item.path}
title={item.name}
v-slots={{
icon: () => renderIcon(item.icon),
}}
onSelect={handleSelect}
active={route.path === item.path}
/>

3
src/router/menus.config.ts
View File

@ -1,4 +1,5 @@
import { IconDashboard } from "@/core/icons";
import type { Component } from "vue";
declare interface MenuGroupType {
name?: string;
@ -8,7 +9,7 @@ declare interface MenuGroupType {
declare interface MenuItemType {
name: string;
path: string;
icon?: string;
icon?: Component;
meta?: Record<string, unknown>;
children?: MenuItemType[];
}