vue实现多级堆叠菜单
Vue 多级堆叠菜单实现方法
递归组件实现
使用 Vue 的递归组件特性可以优雅地处理多级菜单结构。创建一个可自调用的菜单组件，通过 props 传递层级数据。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.title }}
<menu-item
v-if="item.children && item.children.length"
:menu-data="item.children">
</menu-item>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuData: Array
}
}
</script>动态样式控制
通过 CSS 控制菜单的展开/收起状态，结合 Vue 的数据绑定实现交互效果。
.menu-item {
transition: all 0.3s ease;
}
.menu-children {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu-children.expanded {
max-height: 1000px;
}状态管理
使用 Vuex 或组件内部状态管理菜单的展开状态，确保各级菜单能独立控制。
data() {
return {
expandedItems: {}
}
},
methods: {
toggleExpand(itemId) {
this.$set(this.expandedItems, itemId, !this.expandedItems[itemId])
}
}动画效果增强
添加 Vue 的过渡动画使菜单展开更平滑。
<transition name="slide">
<ul v-show="isExpanded">
<!-- 子菜单内容 -->
</ul>
</transition>响应式设计
结合媒体查询确保菜单在不同设备上都能良好显示。
@media (max-width: 768px) {
.menu-item {
width: 100%;
}
}性能优化
对于大型菜单结构，使用虚拟滚动技术避免渲染所有节点。
import { VirtualList } from 'vue-virtual-scroll-list'
export default {
components: {
VirtualList
}
}
