vue 实现多级菜单
Vue 实现多级菜单的方法
递归组件实现
使用递归组件处理无限层级菜单数据，适合动态嵌套结构。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<MultiMenu v-if="item.children" :menuData="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'MultiMenu',
props: ['menuData']
}
</script>动态路由绑定
结合Vue Router实现带路由功能的多级菜单，需预先定义路由配置。
const routes = [
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child
}
]
}
]状态管理集成
使用Vuex或Pinia管理菜单展开状态，实现跨组件状态同步。
// Pinia示例
export const useMenuStore = defineStore('menu', {
state: () => ({
expandedKeys: []
}),
actions: {
toggleExpand(key) {
const index = this.expandedKeys.indexOf(key)
index === -1
? this.expandedKeys.push(key)
: this.expandedKeys.splice(index, 1)
}
}
})样式处理技巧
通过CSS变量控制层级缩进，增强可定制性。
.menu-item {
padding-left: calc(var(--level) * 1rem);
transition: all 0.3s ease;
}性能优化方案
对大型菜单数据使用虚拟滚动，避免DOM节点过多。
<RecycleScroller
:items="flattenMenuData"
:item-size="48"
key-field="id">
<template v-slot="{ item }">
<MenuItem :data="item"/>
</template>
</RecycleScroller>数据格式示例
推荐使用标准化的菜单数据结构。
const menuData = [
{
id: 1,
name: '一级菜单',
icon: 'folder',
children: [
{
id: 11,
name: '二级菜单',
path: '/subpage'
}
]
}
]交互增强功能
实现右键上下文菜单，需阻止默认浏览器行为。
const handleContextMenu = (e, item) => {
e.preventDefault()
contextMenu.value.show(e.clientX, e.clientY, item)
}移动端适配
添加手势支持需引入touch事件处理。
const handleTouch = (e) => {
const touch = e.touches[0]
// 实现滑动展开逻辑
}
