vue实现多级堆叠菜单

Vue 实现多级堆叠菜单的方法

递归组件实现

递归组件是处理多级菜单的常见方式。通过组件自身调用自身，可以动态渲染任意层级的菜单结构。

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

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

动态组件与v-for结合

通过嵌套的v-for循环和条件渲染，可以构建多级菜单。这种方法适合层级固定的菜单结构。

<template>
  <div v-for="level1 in menuData" :key="level1.id">
    <div @click="toggleMenu(level1)">
      {{ level1.name }}
    </div>
    <div v-if="level1.expanded">
      <div v-for="level2 in level1.children" :key="level2.id">
        {{ level2.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          id: 1,
          name: '菜单1',
          expanded: false,
          children: [...]
        }
      ]
    }
  },
  methods: {
    toggleMenu(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

使用Vue Router实现

结合Vue Router可以创建带有路由功能的多级菜单。通过嵌套路由配置实现菜单层级。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child,
        children: [...]
      }
    ]
  }
]

第三方库解决方案

Element UI、Ant Design Vue等UI框架提供了现成的多级菜单组件，可以快速集成。

<template>
  <el-menu>
    <el-submenu v-for="item in menuData" :key="item.id" :index="item.id">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item v-for="child in item.children" :key="child.id">
        {{ child.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

状态管理集成

对于复杂的多级菜单，可以将菜单状态存储在Vuex中，实现跨组件状态共享。

// store.js
export default new Vuex.Store({
  state: {
    menuData: [...]
  },
  mutations: {
    toggleMenu(state, menuId) {
      // 更新菜单展开状态
    }
  }
})

动画效果增强

为多级菜单添加过渡动画，提升用户体验。使用Vue的transition组件实现展开/收起动画。

<template>
  <transition name="slide">
    <ul v-show="isExpanded">
      <li v-for="item in children" :key="item.id">{{ item.name }}</li>
    </ul>
  </transition>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>