vue实现列表菜单

实现列表菜单的基本结构

在 Vue 中实现列表菜单通常使用 v-for 指令动态渲染菜单项。定义一个数组存储菜单数据，通过 v-for 遍历数组生成菜单项。

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

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

添加点击事件和样式

为菜单项添加点击事件，使用 v-on 或 @ 语法绑定事件。通过动态类名或内联样式为选中项添加高亮效果。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于我们' }
      ],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>

<style>
.active {
  background-color: #f0f0f0;
  color: #42b983;
}
</style>

嵌套子菜单的实现

对于多层嵌套菜单，可以使用递归组件或嵌套的 v-for。定义一个包含子菜单项的数组结构，并在模板中递归渲染。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          id: 1, 
          name: '首页',
          children: [
            { id: 11, name: '子菜单1' },
            { id: 12, name: '子菜单2' }
          ]
        },
        { id: 2, name: '产品' }
      ]
    }
  }
}
</script>

使用第三方组件库

对于更复杂的菜单需求，可以集成第三方 UI 库如 Element UI 或 Ant Design Vue。这些库提供了现成的菜单组件和丰富的功能。

<template>
  <el-menu>
    <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>

响应式菜单设计

结合媒体查询和 Vue 的状态管理，可以实现响应式菜单。在小屏幕设备上显示折叠菜单，通过点击按钮展开。

<template>
  <button @click="toggleMenu">菜单</button>
  <ul v-show="isMenuOpen">
    <li v-for="item in menuItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' }
      ],
      isMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style>
@media (min-width: 768px) {
  button {
    display: none;
  }
  ul {
    display: block !important;
  }
}
</style>