vue实现菜单效果

Vue实现菜单效果的方法

基础菜单实现

使用Vue的v-for指令和v-show/v-if可以快速实现基础菜单。通过数据驱动的方式渲染菜单项，结合事件处理实现交互。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isOpen">
      <li v-for="item in menuItems" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      menuItems: [
        { id: 1, text: 'Home' },
        { id: 2, text: 'About' },
        { id: 3, text: 'Contact' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

嵌套多级菜单

对于多级菜单，可以采用递归组件的方式实现。创建一个可复用的菜单组件，通过组件自身调用自身来渲染无限层级。

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

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

动态路由菜单

结合Vue Router可以创建与路由关联的导航菜单。通过遍历路由配置自动生成菜单结构，实现路由跳转功能。

<template>
  <nav>
    <router-link 
      v-for="route in routes" 
      :key="route.path"
      :to="route.path"
    >
      {{ route.meta.title }}
    </router-link>
  </nav>
</template>

<script>
import { routes } from '@/router'

export default {
  computed: {
    routes() {
      return routes.filter(route => route.meta?.showInMenu)
    }
  }
}
</script>

响应式侧边栏菜单

使用CSS过渡效果和Vue的状态管理可以实现平滑的侧边栏菜单动画。结合媒体查询适配不同屏幕尺寸。

<template>
  <div class="sidebar" :class="{ 'sidebar-open': isOpen }">
    <div class="menu-content">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

<style>
.sidebar {
  width: 0;
  transition: width 0.3s ease;
}
.sidebar-open {
  width: 250px;
}

@media (max-width: 768px) {
  .sidebar-open {
    width: 100%;
  }
}
</style>

第三方组件库集成

对于快速开发，可以使用现成的UI组件库如Element UI、Ant Design Vue等提供的菜单组件。

<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">选项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 },
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key) {
      console.log(key)
    }
  }
}
</script>