vue实现横排菜单

Vue实现横排菜单的方法

横排菜单是网页中常见的导航组件，可以通过Vue轻松实现。以下是几种常见的实现方式：

使用v-for指令动态生成菜单项

在Vue组件中定义菜单数据，通过v-for循环渲染菜单项：

<template>
  <ul class="horizontal-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>

<style>
.horizontal-menu {
  display: flex;
  list-style: none;
  padding: 0;
}
.horizontal-menu li {
  margin-right: 20px;
}
.horizontal-menu a {
  text-decoration: none;
  color: #333;
}
</style>

使用Vue Router实现导航菜单

结合Vue Router可以创建SPA应用的导航菜单：

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

<style>
nav {
  display: flex;
  gap: 20px;
}
nav a {
  text-decoration: none;
  color: #333;
}
nav a.router-link-exact-active {
  color: #42b983;
  font-weight: bold;
}
</style>

响应式横排菜单

添加响应式设计，在小屏幕设备上显示汉堡菜单：

<template>
  <div class="menu-container">
    <button @click="toggleMenu" class="menu-toggle">☰</button>
    <ul :class="['horizontal-menu', { 'menu-open': 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: [
        { id: 1, text: '首页', link: '/' },
        { id: 2, text: '产品', link: '/products' },
        { id: 3, text: '关于我们', link: '/about' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style>
.menu-container {
  position: relative;
}
.horizontal-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .horizontal-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    width: 100%;
  }
  .menu-open {
    display: flex;
  }
}
</style>

使用第三方UI库

Element UI或Ant Design Vue等库提供了现成的菜单组件：

<template>
  <el-menu mode="horizontal" :default-active="activeIndex">
    <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-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

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

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  },
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

这些方法提供了从基础到高级的横排菜单实现方案，可以根据项目需求选择合适的方式。