vue 菜单实现

Vue 菜单实现方法

在Vue中实现菜单功能可以通过多种方式完成，以下是几种常见的实现方法：

使用v-for动态生成菜单

通过数据驱动的方式动态渲染菜单项，适合菜单内容可能变化的场景：

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.link">{{ item.text }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, text: '首页', link: '/' },
        { id: 2, text: '产品', link: '/products' },
        { id: 3, text: '关于我们', link: '/about' }
      ]
    }
  }
}
</script>

嵌套菜单实现

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

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.link">{{ item.text }}</a>
      <ul v-if="item.children" class="submenu">
        <li v-for="child in item.children" :key="child.id">
          <a :href="child.link">{{ child.text }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

使用Vue Router集成

当菜单需要与路由结合时，可以配合Vue Router实现导航：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/products">产品</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
</template>

响应式菜单实现

针对移动设备，可以实现可折叠的响应式菜单：

<template>
  <div class="menu-container">
    <button @click="toggleMenu">菜单</button>
    <ul class="menu" :class="{ 'show': isMenuOpen }">
      <li v-for="item in menuItems" :key="item.id">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </div>
</template>

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

<style>
.menu {
  display: none;
}
.menu.show {
  display: block;
}
</style>

使用UI组件库

许多Vue UI组件库提供了现成的菜单组件，如Element UI、Vuetify等：

<template>
  <el-menu mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'
export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>

菜单样式与交互增强

实现基础菜单后，可以通过CSS和JavaScript增强用户体验：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li {
  display: inline-block;
  position: relative;
}
.menu a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}
.menu a:hover {
  background-color: #f5f5f5;
}
.submenu {
  position: absolute;
  display: none;
  min-width: 150px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.menu li:hover .submenu {
  display: block;
}

菜单状态管理

对于复杂的应用，可以使用Vuex或Pinia管理菜单状态：

// store/modules/menu.js
export default {
  state: {
    isMenuOpen: false,
    activeMenuItem: null
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuOpen = !state.isMenuOpen
    },
    setActiveItem(state, item) {
      state.activeMenuItem = item
    }
  }
}

以上方法可以根据具体需求组合使用，实现从简单到复杂的各种菜单功能。