当前位置：首页 > VUE

vue组件实现折叠菜单

2026-01-20 10:56:08VUE

实现折叠菜单的步骤

使用 Vue 的 v-show 或 v-if 控制菜单显示

在 Vue 组件中，可以通过 v-show 或 v-if 指令来控制菜单的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合不频繁切换的场景。

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

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

添加过渡动画效果

通过 Vue 的 <transition> 组件可以为折叠菜单添加平滑的动画效果。使用 CSS 过渡或动画类名实现展开和折叠的动画。

vue组件实现折叠菜单

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

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

使用动态组件实现多级菜单

对于多级折叠菜单，可以通过递归组件或动态组件的方式实现。每个子菜单可以作为一个独立的组件，通过 v-for 动态渲染。

<template>
  <div>
    <div v-for="item in menuItems" :key="item.id">
      <div @click="toggleSubMenu(item)">
        {{ item.title }}
        <span v-if="item.children">{{ item.isOpen ? '−' : '+' }}</span>
      </div>
      <transition name="slide">
        <div v-show="item.isOpen && item.children">
          <ul>
            <li v-for="child in item.children" :key="child.id">{{ child.title }}</li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          title: 'Menu 1',
          isOpen: false,
          children: [
            { id: 11, title: 'Submenu 1' },
            { id: 12, title: 'Submenu 2' }
          ]
        },
        {
          id: 2,
          title: 'Menu 2',
          isOpen: false,
          children: [
            { id: 21, title: 'Submenu 3' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleSubMenu(item) {
      item.isOpen = !item.isOpen;
    }
  }
};
</script>

使用第三方库简化实现

vue组件实现折叠菜单

如果需要更复杂的功能（如手风琴效果、多级嵌套等），可以使用第三方库如 vue-accessible-accordion 或 element-ui 的折叠面板组件。

安装 element-ui：

npm install element-ui

使用 el-collapse 组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Menu 1" name="1">
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
    </el-collapse-item>
    <el-collapse-item title="Menu 2" name="2">
      <div>Menu Item 3</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};
</script>