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

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

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