vue elementui实现菜单
使用 Vue 和 Element UI 实现菜单
Element UI 提供了 el-menu 组件，可以轻松实现导航菜单功能。以下是一个完整的实现示例：
安装 Element UI
确保项目已安装 Vue 和 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)基础菜单实现
在组件中使用 el-menu 创建基本菜单结构：
<template>
<el-menu
default-active="1"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span>首页</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-document"></i>
<span>文档</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>设置</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
name: 'BasicMenu'
}
</script>
<style>
.el-menu-vertical-demo {
width: 200px;
min-height: 100vh;
}
</style>嵌套子菜单
使用 el-submenu 实现多级菜单：
<template>
<el-menu
default-active="1-1"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>导航二</span>
</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>动态生成菜单
通过数据驱动方式动态生成菜单：
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect">
<template v-for="item in menuData">
<el-submenu v-if="item.children" :index="item.index" :key="item.index">
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.title}}</span>
</template>
<el-menu-item
v-for="child in item.children"
:index="child.index"
:key="child.index">
{{child.title}}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.index" :key="item.index">
<i :class="item.icon"></i>
<span>{{item.title}}</span>
</el-menu-item>
</template>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1-1',
menuData: [
{
index: '1',
title: '导航一',
icon: 'el-icon-location',
children: [
{ index: '1-1', title: '选项1' },
{ index: '1-2', title: '选项2' }
]
},
{
index: '2',
title: '导航二',
icon: 'el-icon-menu'
}
]
}
},
methods: {
handleSelect(index) {
console.log('选中菜单:', index)
}
}
}
</script>水平菜单
使用 mode 属性创建水平菜单：
<template>
<el-menu
mode="horizontal"
default-active="1"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品</el-menu-item>
<el-submenu index="3">
<template slot="title">服务</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-submenu>
</el-menu>
</template>路由集成
结合 Vue Router 实现菜单路由跳转：
<template>
<el-menu
router
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="/home">
<i class="el-icon-menu"></i>
<span>首页</span>
</el-menu-item>
<el-menu-item index="/about">
<i class="el-icon-document"></i>
<span>关于</span>
</el-menu-item>
</el-menu>
</template>菜单折叠
实现可折叠的侧边栏菜单：
<template>
<div>
<el-button @click="isCollapse = !isCollapse">切换折叠</el-button>
<el-menu
:collapse="isCollapse"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航</span>
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: false
}
}
}
</script>以上示例展示了 Vue 和 Element UI 实现各种菜单功能的方法，包括基础菜单、多级菜单、动态菜单、水平菜单、路由集成和折叠菜单等功能。
