Ant Design Vue 4.0 侧边导航栏Menu组件封装
25-04-07
slbcun
637℃
0
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>