当前位置：首页 > news >正文

14、springboot3 vue3开发平台-前端-自定义菜单组件，根据路由动态渲染

news 来源：原创 2024/9/21 22:33:57

文章目录

1. 组件
2 . 使用示例

1. 组件

src\components\menuTree\index.vue

<template><template v-for="item in menuList"><!-- 分为两种方式渲染：有子菜单和没有子菜单--><!--      没有子菜单--><el-menu-item :index="item.path" v-if="item.children.length == 0" :key="item.path"@click="handleRouter(item)"><el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon><span>{{ item.menuName }}</span></el-menu-item><el-sub-menu :index="item.path" v-if="item?.children?.length > 0" ><template #title><el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon><span @click="handleSubMenu($event, item)">{{ item.menuName }}</span></template><!--        有子菜单的继续遍历（递归）--><MenuTree :menuList="item.children" ></MenuTree></el-sub-menu></template>
</template>
<script setup lang="ts" >
// 声明 props - 对象格式  在script 中不使用props拿不到数据， <template>中自动解构const props = defineProps({menuList: Array<any>
})// 定义要触发的事件  
const emit = defineEmits(['childEvent'])// 切换路由
const handleRouter = (menu: any) => {emit('childEvent', { type: 'menuItem', item: menu })
}// 目录被点击
const handleSubMenu = (event: Event, menu: any) => {let event1 = event.currentTargetlet event2 = event.targetif (event1 == event2) {emit('childEvent', { type: 'subMenu', item: menu })}
}</script>
<script>
export default {name: "MenuTree"
}
</script>

注1：组件自递归要使用时要导出
注2：这里使用的图标是之前自定义的图标组件

<script>
export default {name: "MenuTree"
}
</script>

2 . 使用示例

在父组件中：

<MenuTree :menuList="menuList" @childEvent="handChildEvent"></MenuTree>// 获取pinia的缓存的菜单数据， 这里数据来源根据自己实际来获取
const menuList = menuStore.menuList// 子组件事件逻辑根据实际来定义
const handChildEvent = (data: any) => {let menu = data.itemif (data.type == 'menuItem') {// 向tabList中添加数据，检查是否已经添加  数据结构：{title:'首页',path:'/index'}let hasNode = menuStore.tabList.filter((item: any) => item.path == menu.path)if (hasNode == null || hasNode.length == 0) {let data = { title: menu.menuName, path: menu.path, id: menu.id, menuName: menu.menuName, parentId: menu.parentId }menuStore.setTabList(data)}// 修改activeTab的值menuStore.setActive(menu.path)// 缓存面包屑数据menuStore.addBreadList(menu)} if (data.type == 'subMenu') {menuStore.addBreadList(menu)}
}