vue菜单实现

Vue 菜单实现方法

使用 Element UI 的菜单组件

Element UI 提供了现成的菜单组件，适合快速实现导航菜单。安装 Element UI 后，可以直接使用 el-menu 相关组件。

<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品列表</el-menu-item>
      <el-menu-item index="2-2">产品详情</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

自定义实现菜单组件

如果需要完全自定义的菜单，可以通过 Vue 组件和 CSS 实现。创建一个可复用的菜单组件，支持多级嵌套。

<template>
  <div class="menu-container">
    <ul class="menu">
      <li v-for="item in menuItems" :key="item.id">
        <a href="#" @click.prevent="handleClick(item)">{{ item.title }}</a>
        <ul v-if="item.children" class="submenu">
          <li v-for="child in item.children" :key="child.id">
            <a href="#" @click.prevent="handleClick(child)">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('menu-click', item)
    }
  }
}
</script>

<style scoped>
.menu {
  list-style: none;
  padding: 0;
}
.menu li {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
.menu li:hover > .submenu {
  display: block;
}
</style>

使用 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>

<script>
export default {
  name: 'NavMenu'
}
</script>

<style scoped>
nav {
  display: flex;
  gap: 1rem;
}
.router-link-active {
  font-weight: bold;
}
</style>

响应式菜单实现

针对移动设备，可以实现可折叠的响应式菜单，通常称为汉堡菜单。

<template>
  <div class="responsive-menu">
    <button @click="toggleMenu">☰</button>
    <div class="menu-items" :class="{ 'show': isOpen }">
      <a href="#">首页</a>
      <a href="#">产品</a>
      <a href="#">关于</a>
    </div>
  </div>
</template>

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

<style scoped>
.responsive-menu {
  position: relative;
}
button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
}
.menu-items {
  display: flex;
  gap: 1rem;
}
.menu-items a {
  text-decoration: none;
}
@media (max-width: 768px) {
  button {
    display: block;
  }
  .menu-items {
    display: none;
    flex-direction: column;
    position: absolute;
    background: white;
    width: 100%;
  }
  .menu-items.show {
    display: flex;
  }
}
</style>

动态菜单数据绑定

菜单数据通常从后端 API 获取，实现动态菜单渲染。

<template>
  <ul class="dynamic-menu">
    <li v-for="item in menuData" :key="item.id">
      <a :href="item.url">{{ item.name }}</a>
      <ul v-if="item.subItems" class="sub-menu">
        <li v-for="subItem in item.subItems" :key="subItem.id">
          <a :href="subItem.url">{{ subItem.name }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuData: []
    }
  },
  async created() {
    try {
      const response = await fetch('/api/menu')
      this.menuData = await response.json()
    } catch (error) {
      console.error('Failed to load menu data:', error)
    }
  }
}
</script>

<style scoped>
.dynamic-menu {
  list-style: none;
  padding: 0;
}
.sub-menu {
  padding-left: 1rem;
}
</style>

以上方法涵盖了 Vue 中实现菜单的常见场景，可以根据具体需求选择适合的方式或组合使用。