vue3+antd制作后台管理系统的左侧导航菜单

• 导航菜单主页面

<template><div :class="collapsed ? 'shrink' : 'open'"><a-buttontype="primary"@click="toggleCollapsed"class="buttonOpen":style="{ marginLeft: collapsed ? '18px' : '10px' }"><p v-if="collapsed" title="展开菜单"><MenuUnfoldOutlined /></p><p v-else title="收拢菜单"><MenuFoldOutlined /></p></a-button><a-menuv-model:openKeys="openKeys"mode="inline"theme="dark":inline-collapsed="collapsed"class="menu-class"><template v-for="item in routerList" :key="item.name"><template v-if="item.meta.hidden"> // 首先根据meta里面的hidden属性判断是否显示，比如登录页面就不需要显示<template v-if="!item.children"> // 如果没有子菜单，显示的就应该是第一层菜单<a-menu-item :key="item.name"><PieChartOutlined /><span>{{ item.meta.title }}</span></a-menu-item></template><template v-else> // 调用递归子组件<sub-menu :menu-info="item" :key="item.name" /></template></template></template></a-menu></div>
</template><script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {MenuFoldOutlined,MenuUnfoldOutlined,PieChartOutlined,
} from "@ant-design/icons-vue";
import SubMenu from "./SubMenu.vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({components: {"sub-menu": SubMenu,MenuFoldOutlined,MenuUnfoldOutlined,PieChartOutlined,},setup() {const router = useRouter();const route = useRoute();const data = reactive({collapsed: false,routerList: router.options.routes,openKeys: [],selectedKeys: [],toggleCollapsed() {if (!data.collapsed) (data.openKeys as any) = [];else (data.openKeys as any) = route.fullPath.split("/").slice(1);data.collapsed = !data.collapsed;},});return {...toRefs(data),};},
});
</script>
<style lang="scss" scoped>
.shrink {width: 80px;transition: width 0.3s;
}
.open {width: 256px;transition: width 0.3s;
}
.menu-class {height: calc(100vh - 50px);
}
.buttonOpen {margin: 6px 0;// transition: all 0.3 !important;
}
</style>

• 递归子组件

<template><a-sub-menu :key="menuInfo.name" v-bind="$attrs"><template #title><span><MailOutlined /><span>{{ menuInfo.meta.title }}</span></span></template><template v-for="item in menuInfo.children" :key="item.name"><template v-if="item.meta.hidden"><template v-if="!item.children"><a-menu-item :key="item.name"><PieChartOutlined /><span>{{ item.meta.title }}</span></a-menu-item></template><template v-else> // 递归调用自身组件<sub-menu :menu-info="item" :key="item.name" /></template></template></template></a-sub-menu>
</template><script lang="ts">
import { defineComponent } from "vue";
import { Menu } from 'ant-design-vue';import { PieChartOutlined, MailOutlined } from "@ant-design/icons-vue";
export default defineComponent({name: "SubMenu",components: {PieChartOutlined,MailOutlined,},props: {...Menu.SubMenu.props,menuInfo: {type: Object,default: () => ({}),},},
});
</script><style lang="scss" scoped></style>

截图一个router的写法

如果有根据后台获取展示菜单，则继续在meta中添加对应属性匹配即可，类似图上umark。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！