当前位置：首页 > VUE

vue实现折叠菜单

2026-01-15 07:18:11VUE

实现折叠菜单的基本思路

在Vue中实现折叠菜单通常涉及使用组件化开发，结合状态管理控制菜单的展开与折叠。核心是通过v-show或v-if动态切换子菜单的显示状态，并通过事件触发（如点击）改变状态。

基础实现代码示例

以下是一个简单的折叠菜单实现，基于Vue 3的<script setup>语法：

<template>
  <div class="menu">
    <div 
      class="menu-item" 
      v-for="item in menuItems" 
      :key="item.id"
      @click="toggleMenu(item.id)"
    >
      <span>{{ item.title }}</span>
      <div class="submenu" v-show="activeMenu === item.id">
        <div 
          class="submenu-item" 
          v-for="subItem in item.children" 
          :key="subItem.id"
        >
          {{ subItem.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const menuItems = [
  { id: 1, title: '菜单1', children: [
    { id: 11, title: '子菜单1-1' },
    { id: 12, title: '子菜单1-2' }
  ]},
  { id: 2, title: '菜单2', children: [
    { id: 21, title: '子菜单2-1' },
    { id: 22, title: '子菜单2-2' }
  ]}
];

const activeMenu = ref(null);
const toggleMenu = (id) => {
  activeMenu.value = activeMenu.value === id ? null : id;
};
</script>

<style scoped>
.menu-item {
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
.submenu {
  margin-left: 20px;
}
.submenu-item {
  padding: 6px;
  color: #666;
}
</style>

支持多级嵌套的实现

若需支持多级嵌套菜单，可通过递归组件实现：

vue实现折叠菜单

<template>
  <div class="menu">
    <MenuItem 
      v-for="item in menuItems" 
      :key="item.id" 
      :item="item" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MenuItem from './MenuItem.vue';

const menuItems = [
  { 
    id: 1, 
    title: '菜单1', 
    children: [
      { 
        id: 11, 
        title: '子菜单1-1',
        children: [
          { id: 111, title: '三级菜单1-1-1' }
        ]
      }
    ]
  }
];
</script>

MenuItem.vue（递归组件）：

<template>
  <div>
    <div class="menu-item" @click="toggleOpen">
      <span>{{ item.title }}</span>
      <span v-if="hasChildren">{{ isOpen ? '−' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren" class="submenu">
      <MenuItem 
        v-for="child in item.children" 
        :key="child.id" 
        :item="child" 
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  item: Object
});

const isOpen = ref(false);
const hasChildren = computed(() => 
  props.item.children && props.item.children.length > 0
);

const toggleOpen = () => {
  if (hasChildren.value) {
    isOpen.value = !isOpen.value;
  }
};
</script>

动画过渡效果

通过Vue的<transition>组件添加展开/折叠动画：

vue实现折叠菜单

<transition name="slide">
  <div v-show="isOpen && hasChildren" class="submenu">
    <!-- 子菜单内容 -->
  </div>
</transition>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
.slide-enter-from, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave-from {
  max-height: 500px; /* 根据实际内容调整 */
}
</style>

使用第三方库

若需快速实现复杂功能，可考虑以下库：

Element Plus：内置<el-menu>组件支持折叠
Ant Design Vue：提供<a-menu>组件
Vue-Accordion：专注手风琴效果的轻量级库

安装Element Plus示例：

npm install element-plus

使用示例：

<template>
  <el-menu :default-openeds="['1']">
    <el-sub-menu index="1">
      <template #title>菜单1</template>
      <el-menu-item index="1-1">子菜单1</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus';
</script>