Ant Design Vue 4.0 侧边导航栏Menu组件封装

Ant Design Vue 4.0 a-modal 弹窗组件封装

<template>
<a-layout-sider>
<div>Han</div>
<a-menu v-model:selectedKeys="routerPathKey" theme="light" mode="inline" @click="onTitleClick" :openKeys="ACTIVE_NAV">
<template v-for="itm in NAV_MENU" :key="itm.name">
<a-sub-menu v-if="itm.children && itm.children.length" :key="itm.name">
<template #title>
<icon-font :type="(itm.meta?.icon as any)" />
<span>{{ itm.name }}</span>
</template>
<a-menu-item v-for="_itm in itm.children" :key="_itm.name">
<icon-font :type="(_itm.meta?.icon as any)" />
<span>{{ _itm.name }}</span>
</a-menu-item>
</a-sub-menu>
<a-menu-item v-if="!itm.children || itm.children.length < 1" :key="itm.name">
<icon-font :type="(itm.meta?.icon as any)" />
<span>{{ itm.name }}</span>
</a-menu-item>
</template>
<a-menu-item key="敬请期待" disabled>
<icon-font type="han-icon-jingqingqidai1" />
<span>敬请期待</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 阿里图标库
import { createFromIconfontCN } from "@ant-design/icons-vue";
const IconFont = createFromIconfontCN({
scriptUrl: "/icon/nav-icon/iconfont.js"
});
// 路由表
const NAV_MENU = router.options.routes[0].children;
// 路由跳转
const onTitleClick = (res: any) => {
router.push({ name: res.key });
};
// 路由监控
const routerPathKey = ref<Array<any>>([]);
// 刷新页面展开一级菜单
const ACTIVE_NAV = ref<string[]>([]);
const initFN = () => {
ACTIVE_NAV.value = [];
routerPathKey.value = [router.currentRoute.value.name];
NAV_MENU?.forEach((itm: any) => {
itm.children?.find((item: { name: string }) => {
return item.name == routerPathKey.value[0] && ACTIVE_NAV.value.push(itm.name);
});
});
};
initFN();
router.afterEach((to, from) => {
initFN();
});
</script>
<style scoped>
@import "index.less";
</style>