vue实现menu

Vue 实现 Menu 的方法

使用 Vue 实现菜单功能可以通过多种方式完成，以下介绍几种常见的方法：

使用 Vue Router 实现导航菜单

通过 Vue Router 可以轻松实现路由跳转功能，结合自定义样式即可完成菜单。

<template>
  <div class="menu">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
</template>

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

<style>
.menu {
  display: flex;
  gap: 20px;
}
.router-link-active {
  font-weight: bold;
}
</style>

使用组件库实现菜单

Element UI、Ant Design Vue 等组件库提供了现成的 Menu 组件。

<template>
  <el-menu mode="horizontal" default-active="1">
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template #title>Products</template>
      <el-menu-item index="2-1">Product 1</el-menu-item>
      <el-menu-item index="2-2">Product 2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">About</el-menu-item>
  </el-menu>
</template>

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

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

自定义动态菜单

可以根据数据动态生成菜单项。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: 'Home', link: '/home' },
        { id: 2, title: 'About', link: '/about' },
        { id: 3, title: 'Contact', link: '/contact' }
      ]
    }
  }
}
</script>

<style>
.menu {
  list-style: none;
  padding: 0;
  display: flex;
}
.menu li {
  margin-right: 15px;
}
</style>

响应式菜单实现

使用 Vue 的响应式特性实现移动端友好的菜单。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen" class="mobile-menu">
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</template>

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

<style>
.mobile-menu {
  list-style: none;
  padding: 0;
}
.mobile-menu li {
  padding: 10px;
}
</style>

菜单状态管理

对于复杂应用，可以使用 Vuex 管理菜单状态。

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    menuItems: [
      { id: 1, title: 'Home', link: '/home' },
      { id: 2, title: 'About', link: '/about' }
    ],
    isMenuOpen: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuOpen = !state.isMenuOpen
    }
  }
})

<!-- MenuComponent.vue -->
<template>
  <button @click="toggleMenu">Toggle Menu</button>
  <ul v-show="$store.state.isMenuOpen">
    <li v-for="item in $store.state.menuItems" :key="item.id">
      <a :href="item.link">{{ item.title }}</a>
    </li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['toggleMenu'])
  }
}
</script>

菜单动画效果

为菜单添加过渡动画增强用户体验。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <transition name="slide">
      <ul v-show="isMenuOpen" class="menu">
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </transition>
  </div>
</template>

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

<style>
.menu {
  list-style: none;
  padding: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>

以上方法可以根据具体需求选择使用或组合使用，实现功能完善且美观的菜单组件。