vue 菜单实现

Vue 菜单实现方法

基础菜单实现

使用 Vue 的 v-for 指令动态渲染菜单项，结合 v-bind 绑定点击事件。以下是一个简单示例：

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id" @click="handleClick(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于我们' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log('点击了:', item.name)
    }
  }
}
</script>

嵌套子菜单

通过递归组件实现多级菜单。创建一个可递归调用的菜单组件：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <menu-item v-if="item.children" :items="item.children"></menu-item>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

路由集成

将菜单与 Vue Router 集成，实现页面导航功能：

<template>
  <nav>
    <router-link
      v-for="item in routes"
      :key="item.path"
      :to="item.path"
      active-class="active"
    >
      {{ item.name }}
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/', name: '首页' },
        { path: '/products', name: '产品' },
        { path: '/about', name: '关于' }
      ]
    }
  }
}
</script>

状态管理

使用 Vuex 管理菜单的展开/收起状态：

// store.js
export default new Vuex.Store({
  state: {
    menuCollapsed: false
  },
  mutations: {
    toggleMenu(state) {
      state.menuCollapsed = !state.menuCollapsed
    }
  }
})

在组件中使用：

<template>
  <div :class="{ 'menu-collapsed': $store.state.menuCollapsed }">
    <button @click="$store.commit('toggleMenu')">切换菜单</button>
    <!-- 菜单内容 -->
  </div>
</template>

响应式设计

添加媒体查询和动态样式，使菜单在不同设备上表现良好：

.menu {
  display: flex;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

结合 Vue 的响应式数据：

<template>
  <button @click="isMobileMenuOpen = !isMobileMenuOpen">菜单</button>
  <div :class="{ 'mobile-menu': true, 'open': isMobileMenuOpen }">
    <!-- 菜单内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobileMenuOpen: false
    }
  }
}
</script>