【Vue.js】Vue.js组件库Element中的导航菜单、标签页、面包屑和页头
时间:2022-07-24
本文章向大家介绍【Vue.js】Vue.js组件库Element中的导航菜单、标签页、面包屑和页头，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
1、NavMenu 导航菜单
为网站提供导航功能的菜单。
顶栏
适用广泛的基础用法。
导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
<el-menu :default-active="activeIndex" class="el-menu-demo" 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 class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
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>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>侧栏
垂直菜单，可内嵌子菜单。
通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。
<el-row class="tac">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@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 :span="12">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@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>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>折叠
<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" class="el-menu-vertical-demo" @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>
<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>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 |
Menu Methods
方法名称 |
说明 |
参数 |
|---|---|---|
open |
展开指定的 sub-menu |
index: 需要打开的 sub-menu 的 index |
close |
收起指定的 sub-menu |
index: 需要收起的 sub-menu 的 index |
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 |
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 |
Menu-Item Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
index |
唯一标志 |
string |
— |
— |
route |
Vue Router 路径对象 |
Object |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
Menu-Group Attribute
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
title |
分组标题 |
string |
— |
— |
2、Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>选项卡样式
选项卡样式的标签页。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。
<template>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>卡片化
卡片化的标签页。
将type设置为border-card。
<el-tabs type="border-card">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>位置
可以通过 tab-position 设置标签的位置。
标签一共有四个方向的设置 tabPosition=“left|right|top|bottom”
<template>
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
<el-radio-button label="top">top</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="bottom">bottom</el-radio-button>
<el-radio-button label="left">left</el-radio-button>
</el-radio-group>
<el-tabs :tab-position="tabPosition" style="height: 200px;">
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tabPosition: 'left'
};
}
};
</script>自定义标签页
可以通过具名 slot 来实现自定义标签页的内容。
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
我的行程
</el-tab-pane>
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用。
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
}
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
}
</script>自定义增加标签页触发器
<div style="margin-bottom: 20px;">
<el-button
size="small"
@click="addTab(editableTabsValue)"
>
add tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
<script>
export default {
data() {
return {
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
</script>Tabs Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
value / v-model |
绑定值，选中选项卡的 name |
string |
— |
第一个选项卡的 name |
type |
风格类型 |
string |
card/border-card |
— |
closable |
标签是否可关闭 |
boolean |
— |
false |
addable |
标签是否可增加 |
boolean |
— |
false |
editable |
标签是否同时可增加和关闭 |
boolean |
— |
false |
tab-position |
选项卡所在位置 |
string |
top/right/bottom/left |
top |
stretch |
标签的宽度是否自撑开 |
boolean |
- |
false |
before-leave |
切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换 |
Function(activeName, oldActiveName) |
— |
— |
Tabs Events
事件名称 |
说明 |
回调参数 |
|---|---|---|
tab-click |
tab 被选中时触发 |
被选中的标签 tab 实例 |
tab-remove |
点击 tab 移除按钮后触发 |
被删除的标签的 name |
tab-add |
点击 tabs 的新增按钮后触发 |
— |
edit |
点击 tabs 的新增按钮或 tab 被关闭后触发 |
(targetName, action) |
Tab-pane Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
label |
选项卡标题 |
string |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
name |
与选项卡绑定值 value 对应的标识符，表示选项卡别名 |
string |
— |
该选项卡在选项卡列表中的顺序值，如第一个选项卡则为’1’ |
closable |
标签是否可关闭 |
boolean |
— |
false |
lazy |
标签是否延迟渲染 |
boolean |
— |
false |
3、Breadcrumb 面包屑
显示当前页面的路径，快速返回之前的任意页面。
基础用法
适用广泛的基础用法。
在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠/。
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>图标分隔符
通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效。
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>Breadcrumb Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
separator |
分隔符 |
string |
— |
斜杠’/’ |
separator-class |
图标分隔符 class |
string |
— |
- |
Breadcrumb Item Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
to |
路由跳转对象，同 vue-router 的 to |
string/object |
— |
— |
replace |
在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 |
boolean |
— |
false |
4、PageHeader 页头
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
基础
<el-page-header @back="goBack" content="详情页面">
</el-page-header>
<script>
export default {
methods: {
goBack() {
console.log('go back');
}
}
}
</script>Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
|---|---|---|---|---|
title |
标题 |
string |
— |
返回 |
content |
内容 |
string |
— |
— |
Events
事件名称 |
说明 |
回调参数 |
|---|---|---|
back |
点击左侧区域触发 |
— |
Slots
事件名称 |
说明 |
|---|---|
title |
标题内容 |
content |
内容 |
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 2.02-request_header_two
- Centos安装Python3
- 2.03-handler_openner
- 2.04-proxy-handler
- 图形验证码的识别
- 2.05-random-uesr-proxy
- 5.01-requests_auth
- Git分支操作
- 5.02-requests_proxy
- 5.03-requests_ssl
- 5.04-requests_cookies
- 通过 Node.js 小示例学习浏览器缓存策略
- [未解决]报错: execjs._exceptions.ProgramError: TypeError: Cannot read property 'extend' of undefined
- 5.05-requests_cookies2
- 5.06-re