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
  }
}