vue实现菜单效果

使用 Vue 实现菜单效果

基础菜单结构

通过 Vue 的 v-for 动态渲染菜单项，结合 v-if 或 v-show 控制子菜单的显示与隐藏。

<template>
  <div class="menu">
    <div 
      v-for="item in menuItems" 
      :key="item.id"
      @click="toggleSubMenu(item)"
    >
      {{ item.title }}
      <div v-if="item.showChildren" class="submenu">
        <div v-for="child in item.children" :key="child.id">
          {{ child.title }}
        </div>
      </div>
    </div>
  </div>
</template>

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

<style>
.menu {
  width: 200px;
}
.submenu {
  padding-left: 20px;
}
</style>

嵌套菜单实现

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

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

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: { MenuItem },
  data() {
    return {
      menuItems: [
        {
          id: 1,
          title: '菜单1',
          children: [
            { 
              id: 11, 
              title: '子菜单1',
              children: [
                { id: 111, title: '子子菜单1' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

MenuItem.vue 组件：

<template>
  <div>
    <div @click="toggle">
      {{ item.title }}
    </div>
    <div v-if="showChildren" class="submenu">
      <menu-item 
        v-for="child in item.children" 
        :key="child.id" 
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['item'],
  data() {
    return {
      showChildren: false
    }
  },
  methods: {
    toggle() {
      this.showChildren = !this.showChildren;
    }
  }
}
</script>

使用 Vue Router 实现路由菜单

结合 Vue Router 实现点击菜单跳转路由。

<template>
  <div class="menu">
    <router-link 
      v-for="item in menuItems" 
      :key="item.path" 
      :to="item.path"
    >
      {{ item.title }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/home', title: '首页' },
        { path: '/about', title: '关于' }
      ]
    }
  }
}
</script>

动画效果

为菜单添加过渡动画效果，提升用户体验。

<template>
  <div>
    <div @click="toggle">菜单</div>
    <transition name="slide">
      <div v-if="show" class="submenu">
        <div>子菜单1</div>
        <div>子菜单2</div>
      </div>
    </transition>
  </div>
</template>

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

第三方组件库

使用 Element UI 或 Ant Design Vue 等 UI 库快速实现菜单。

Element UI 示例：

<template>
  <el-menu>
    <el-submenu index="1">
      <template slot="title">菜单1</template>
      <el-menu-item index="1-1">子菜单1</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui';

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>