当前位置：首页 > VUE

vue实现折叠菜单

2026-03-28 20:48:44VUE

实现折叠菜单的基本思路

在Vue中实现折叠菜单，可以通过动态绑定CSS类或样式，结合v-if或v-show控制菜单项的显示与隐藏。核心是利用Vue的响应式数据驱动视图变化。

使用v-show控制显示隐藏

通过v-show指令可以简单地切换元素的显示状态，适合频繁切换的场景：

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div v-show="isOpen">
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen;
    }
  }
}
</script>

使用动态类名实现动画效果

结合CSS过渡效果，可以为折叠菜单添加平滑的动画：

vue实现折叠菜单

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div class="menu" :class="{ 'menu-collapsed': !isOpen }">
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
      </ul>
    </div>
  </div>
</template>

<style>
.menu {
  transition: max-height 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}
.menu-collapsed {
  max-height: 0;
}
</style>

递归组件实现多级菜单

对于多级嵌套菜单，可以使用递归组件实现：

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      <div @click="toggleChildren(item)">
        {{ item.title }}
      </div>
      <Menu v-if="item.children" :menuItems="item.children" v-show="item.isOpen"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Menu',
  props: ['menuItems'],
  methods: {
    toggleChildren(item) {
      item.isOpen = !item.isOpen;
    }
  }
}
</script>

使用Vue Transition组件

Vue内置的Transition组件可以更方便地实现动画效果：

vue实现折叠菜单

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <transition name="slide">
      <div v-show="isOpen" class="menu">
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
  max-height: 500px;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门的下拉菜单组件库：

vue-accordion
vue-collapse
element-ui的el-menu组件

例如使用Element UI：

<template>
  <el-menu :default-openeds="['1']">
    <el-submenu index="1">
      <template slot="title">Menu 1</template>
      <el-menu-item index="1-1">Item 1</el-menu-item>
      <el-menu-item index="1-2">Item 2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { Menu, Submenu, MenuItem } from 'element-ui';
export default {
  components: {
    'el-menu': Menu,
    'el-submenu': Submenu,
    'el-menu-item': MenuItem
  }
}
</script>

以上方法提供了从简单到复杂的多种实现方式，可根据项目需求选择合适的技术方案。