vue elementui实现菜单

使用 Vue 和 Element UI 实现菜单

Element UI 提供了 el-menu 组件，可以快速构建导航菜单。以下是一个完整的实现示例：

安装 Element UI

确保项目已安装 Element UI：

npm install element-ui

在 main.js 中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

基础菜单实现

在 Vue 组件中使用 el-menu 组件：

<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">产品列表</el-menu-item>
      <el-menu-item index="2-2">产品分类</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

侧边栏菜单

如果需要侧边栏菜单，可以修改 mode 为 vertical：

<el-menu
  :default-active="activeIndex"
  mode="vertical"
  @select="handleSelect">
  <!-- 菜单项 -->
</el-menu>

动态生成菜单

从接口获取菜单数据时，可以使用 v-for 动态生成：

<el-menu :default-active="activeIndex">
  <template v-for="item in menuData">
    <el-submenu v-if="item.children" :index="item.id">
      <template slot="title">{{item.title}}</template>
      <el-menu-item 
        v-for="child in item.children" 
        :key="child.id"
        :index="child.id">
        {{child.title}}
      </el-menu-item>
    </el-submenu>
    <el-menu-item v-else :index="item.id">
      {{item.title}}
    </el-menu-item>
  </template>
</el-menu>

菜单路由集成

结合 Vue Router 实现路由跳转：

<el-menu
  :router="true"
  :default-active="$route.path">
  <el-menu-item index="/home">首页</el-menu-item>
  <el-menu-item index="/about">关于</el-menu-item>
</el-menu>

菜单样式自定义

可以通过 CSS 覆盖默认样式：

.el-menu {
  border-right: none;
}
.el-menu-item {
  font-size: 16px;
}

以上示例展示了使用 Element UI 实现各种菜单场景的方法，包括基础菜单、侧边栏菜单、动态菜单以及与路由的集成。根据实际需求选择合适的实现方式即可。