vue 实现多级菜单

Vue 实现多级菜单的方法

递归组件实现

递归组件是实现多级菜单的核心技术。通过组件调用自身，可以动态渲染任意层级的菜单结构。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <menu-item v-if="item.children" :menu-data="item.children"></menu-item>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuData: Array
  }
}
</script>

数据结构设计

合理的菜单数据结构是基础，推荐使用嵌套对象形式：

const menuData = [
  {
    id: 1,
    name: '一级菜单',
    children: [
      {
        id: 11,
        name: '二级菜单',
        children: [...]
      }
    ]
  }
]

动态样式处理

为不同层级菜单添加样式差异，增强用户体验：

ul {
  list-style: none;
  padding-left: 20px;
}

li {
  cursor: pointer;
  padding: 5px 10px;
}

li:hover {
  background-color: #f0f0f0;
}

状态管理

使用Vuex或Pinia管理菜单展开/折叠状态：

// store.js
export const useMenuStore = defineStore('menu', {
  state: () => ({
    expandedItems: []
  }),
  actions: {
    toggleExpand(id) {
      const index = this.expandedItems.indexOf(id)
      if (index > -1) {
        this.expandedItems.splice(index, 1)
      } else {
        this.expandedItems.push(id)
      }
    }
  }
})

路由集成

将菜单与Vue Router集成，实现导航功能：

const routes = [
  {
    path: '/products',
    component: Products,
    children: [
      {
        path: 'category',
        component: Category
      }
    ]
  }
]

性能优化

对于大型菜单数据，可采用虚拟滚动技术：

<template>
  <RecycleScroller
    :items="flattenedMenuData"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

响应式设计

添加移动端适配处理：

@media (max-width: 768px) {
  .menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .menu-container.active {
    transform: translateX(0);
  }
}

无障碍支持

增强菜单的可访问性：

<li 
  role="menuitem"
  :aria-expanded="isExpanded(item.id)"
  @keydown.enter="toggleExpand(item.id)"
>
  {{ item.name }}
</li>