1. NavMenu导航菜单
1.1. NavMenu导航菜单为网站提供导航功能的菜单。
1.2. Menu Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
mode |
模式 |
string |
horizontal / vertical |
vertical |
collapse |
是否水平折叠收起菜单(仅在mode为vertical时可用) |
boolean |
无 |
false |
background-color |
菜单的背景色(仅支持hex格式) |
string |
无 |
#ffffff |
text-color |
菜单的文字颜色(仅支持hex格式) |
string |
无 |
#303133 |
active-text-color |
当前激活菜单的文字颜色(仅支持hex格式) |
string |
无 |
#409EFF |
default-active |
当前激活菜单的index |
string |
无 |
无 |
default-openeds |
当前打开的sub-menu的index的数组 |
Array |
无 |
无 |
unique-opened |
是否只保持一个子菜单的展开 |
boolean |
无 |
false |
menu-trigger |
子菜单打开的触发方式(只在mode为horizontal时有效) |
string |
hover / click |
hover |
router |
是否使用vue-router的模式, 启用该模式会在激活导航时以index作为path进行路由跳转 |
boolean |
无 |
false |
collapse-transition |
是否开启折叠动画 |
boolean |
无 |
true |
1.3. Menu Methods
方法名称 |
说明 |
参数 |
open |
展开指定的sub-menu |
index: 需要打开的sub-menu的index |
close |
收起指定的sub-menu |
index: 需要收起的sub-menu的index |
1.4. Menu Events
事件名称 |
说明 |
回调参数 |
select |
菜单激活回调 |
index: 选中菜单项的index, indexPath: 选中菜单项的index path |
open |
sub-menu展开的回调 |
index: 打开的sub-menu的index, indexPath: 打开的sub-menu的index path |
close |
sub-menu收起的回调 |
index: 收起的sub-menu的index, indexPath: 收起的sub-menu的index path |
1.5. SubMenu Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
唯一标志 |
string/null |
无 |
null |
popper-class |
弹出菜单的自定义类名 |
string |
无 |
无 |
show-timeout |
展开sub-menu的延时 |
number |
无 |
300 |
hide-timeout |
收起sub-menu的延时 |
number |
无 |
300 |
disabled |
是否禁用 |
boolean |
无 |
false |
popper-append-to-body |
是否将弹出菜单插入至body元素。在菜单的定位出现问题时, 可尝试修改该属性 |
boolean |
无 |
一级子菜单: true / 非一级子菜单: false |
1.6. Menu-Item Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
唯一标志 |
string |
无 |
无 |
route |
Vue Router路径对象 |
Object |
无 |
无 |
disabled |
是否禁用 |
boolean |
无 |
false |
1.7. Menu-Group Attribute
参数 |
说明 |
类型 |
title |
分组标题 |
string |
2. NavMenu导航菜单例子
2.1. 使用脚手架新建一个名为element-ui-navmenu的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HorizontalNavMenu from '../components/HorizontalNavMenu.vue'
import VerticalNavMenu from '../components/VerticalNavMenu.vue'
import CollapseNavMenu from '../components/CollapseNavMenu.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/HorizontalNavMenu' },
{ path: '/HorizontalNavMenu', component: HorizontalNavMenu },
{ path: '/VerticalNavMenu', component: VerticalNavMenu },
{ path: '/CollapseNavMenu', component: CollapseNavMenu }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建HorizontalNavMenu.vue
<template>
<div>
<h1>顶栏-适用广泛的基础用法</h1>
<h4>导航菜单默认为垂直模式, 通过mode属性可以使导航菜单变更为水平模式。另外, 在菜单中通过submenu组件可以生成二级菜单。Menu还提供了background-color、text-color和active-text-color, 分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。</h4>
<el-menu :default-active="activeIndex1" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div style="margin-top: 50px;"></div>
<el-menu :default-active="activeIndex2" 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">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data () {
return {
activeIndex1: '1',
activeIndex2: '1'
}
},
methods: {
handleSelect (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
2.4. 在components下创建VerticalNavMenu.vue
<template>
<div>
<h1>侧栏-垂直菜单, 可内嵌子菜单</h1>
<h4>通过el-menu-item-group组件可以实现菜单进行分组, 分组名可以通过title属性直接设定, 也可以通过具名slot来设定。</h4>
<el-row>
<el-col :span="3">
<h5>默认颜色</h5>
<el-menu default-active="2" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>导航一</span></template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :offset="2" :span="3">
<h5>自定义颜色</h5>
<el-menu default-active="2" @open="handleOpen" @close="handleClose" 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-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
2.5. 在components下创建CollapseNavMenu.vue
<template>
<div>
<h1>折叠</h1>
<h4>collapse是否水平折叠收起菜单(仅在mode为vertical时可用)</h4>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data () {
return {
isCollapse: true
}
},
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>
2.6. 运行项目, 访问http://localhost:8080/#/HorizontalNavMenu
2.7. 运行项目, 访问http://localhost:8080/#/VerticalNavMenu
2.8. 运行项目, 访问http://localhost:8080/#/CollapseNavMenu