当前位置：首页 > VUE

vue组件实现折叠菜单

2026-02-21 02:58:48VUE

Vue 组件实现折叠菜单

基础实现方法

使用 Vue 的 v-if 或 v-show 控制菜单显隐，结合点击事件切换状态。示例代码：

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

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

动态子菜单实现

通过递归组件实现多级嵌套菜单：

<template>
  <div>
    <div 
      v-for="item in menuItems" 
      :key="item.title"
      class="menu-item"
    >
      <div @click="toggleSubMenu(item)">
        {{ item.title }}
        <span v-if="item.children">{{ item.isOpen ? '-' : '+' }}</span>
      </div>
      <div v-show="item.isOpen && item.children">
        <MenuComponent :menuItems="item.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuComponent',
  props: ['menuItems'],
  methods: {
    toggleSubMenu(item) {
      if (item.children) {
        item.isOpen = !item.isOpen
      }
    }
  }
}
</script>

动画效果优化

添加过渡动画使折叠更平滑：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="slide">
      <div v-show="isOpen" class="menu-content">
        <!-- 菜单内容 -->
      </div>
    </transition>
  </div>
</template>

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

组件封装建议

通过 props 接收菜单数据
使用插槽允许自定义菜单项样式
提供事件钩子如 @open、@close
支持键盘导航功能

完整组件示例：

vue组件实现折叠菜单

<template>
  <div class="collapse-menu">
    <div 
      class="menu-header"
      @click="toggle"
      @keydown.enter="toggle"
      tabindex="0"
    >
      <slot name="header">{{ title }}</slot>
      <span class="arrow">{{ isOpen ? '▼' : '▶' }}</span>
    </div>
    <transition name="menu">
      <div v-show="isOpen" class="menu-body">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      this.$emit('update:isOpen', !this.isOpen)
    }
  }
}
</script>