前言
快速导航对于前端开发的靓仔们应该是很熟悉了，他能快速的切换到之前打开的页面，是系统更加灵活方便。我这里采用的是Vue+Element plus+Vuex+Router实现的快速导航，供大家参考。
一、分析
快速导航具备的功能点
- 展示打开过的导航项
- 点击导航项可以切换页面
- 导航关闭
- 导航关闭快捷方式（关闭当前、关闭其他、关闭左侧、关闭右侧和全部关闭）
样式方面完全采用的是Element Plus提供的Tabs 组件和Dropdown组件。
二、实现
- 基于Element Plus提供的
Tabs组件和Dropdown组件实现页面效果。代码如下
<template>
<div class="fast-nav">
<el-tabs
v-model="router.currentRoute.value.name"
type="card"
class="tabs"
closable
@tab-click="handleClick"
@contextmenu.prevent.native="openContextMenu($event)"
@tab-remove="removeTab">
<el-tab-pane
v-for="item in tabList"
:key="item.name"
:name="item.name">
<template #label>
<el-space>
<el-icon style="font-size: 18px">
<component class="el-icon" :is="item.menuIcon"></component>
</el-icon>
<span>{
{ store.state.internationalization === 'zhCn' ? item.title : item.titleEn }}</span>
</el-space>
</template>
</el-tab-pane>
</el-tabs>
<el-dropdown ref="dropdown" @command="handleCommand" trigger="contextmenu" style="position: absolute">
<span></span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a" :icon="CircleClose">{
{ $t('button.closeCurrent') }}</el-dropdown-item>
<el-dropdown-item command="b" :icon="CircleCloseFilled">{
{ $t('button.closeOther') }}</el-dropdown-item>
<el-dropdown-item command="c" :icon="Back">{
{ $t('button.closeLeft') }}</el-dropdown-item>
<el-dropdown-item command="d" :icon="Right">{
{ $t('button.closeRight') }}</el-dropdown-item>
<el-dropdown-item command="e" :icon="DeleteFilled">{
{ $t('button.closeAll') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
- 实现数据动态化
采用Vuex存储tabList集合，在路由跳转时存入到tabList集合中，关闭页面时再删除tabList中的对应项实现动态化，具体代码如下
//路由守卫监听路由变化存储路由信息到tbList中
router.beforeEach(async (to, from, next) => {
store.dispatch("tabList", to).then()
})
//页面获取tabList
import {
useStore} from "@/vuex/store";
const store = useStore();
let tabList = ref(store.state.tabList)
- 实现快捷方式相关功能，具体代码如下
//关闭指定tab
const removeTab = (targetName: string) => {
//首页不能关闭
if (targetName === tabList.value[0].name) {
return ElMessage.warning('工作台不能关闭 ！！！')
}
//获取路由下标
const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
//获取当前选中的tab下标
const current = tabList.value.findIndex(item => item.name === targetName)
//删除当前选中tab
tabList.value.splice(current, 1);
//判断当前下标和路由下标是否相同，是->跳转前一位路由
if (index === current){
router.push(tabList.value[index - 1].name)
}
}
//关闭当前tab
const closeItem = () => {
if (router.currentRoute.value.name === tabList.value[0].name) {
return ElMessage.warning('工作台不能关闭 ！！！')
}
//获取路由下标
const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
//获取当前选中的tab下标
tabList.value.splice(index, 1);
//跳转前一位路由
router.push(tabList.value[index - 1].name)
}
//关闭其他tab
const closeOther = () => {
//获取路由下标
const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
//下表是否为0，是->删除0之后的所有数据
if (index === 0) {
tabList.value.splice(1);
}
//下表是否为1且集合长度大于2
if (index === 1 && tabList.value.length > 2) {
tabList.value.splice(2);
}
//下表大于1
if (index > 1) {
tabList.value.splice(1, index - 1);
tabList.value.splice(2);
}
}
//关闭左侧tab
const closeLeft = () => {
//获取路由下标
const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
//判断下表是否大于1
if (index > 1) {
tabList.value.splice(1, index - 1);
}
}
//关闭右侧tab
const closeRight = () => {
//获取路由下标
const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
//判断下表是否小于总长度
if (index < tabList.value.length - 1) {
tabList.value.splice(index + 1, tabList.value.length - index);
}
}
//关闭所有tab
const closeAll = () => {
//判断总长度是否大于1
if (tabList.value.length > 1) {
tabList.value.splice(1);
}
//跳转首页
router.push(tabList.value[0].name)
}
//下拉菜单dom
const dropdown = ref()
//打开下拉菜单并重新定位
const openContextMenu = (e) => {
dropdown.value.handleClose()
setTimeout(() => {
dropdown.value.$el.style.left = e.x + 'px'
dropdown.value.$el.style.top = e.y + 'px'
dropdown.value.handleOpen()
}, 50)
}
const router = useRouter();
//点击tab跳转路由
const handleClick = (tab: TabsPaneContext) => {
router.push(tab.paneName.toString())
}
//点击下拉菜单中的菜单
const handleCommand = (command: string | number | object) => {
switch (command) {
case 'a':
closeItem()
break
case 'b':
closeOther()
break
case 'c':
closeLeft()
break
case 'd':
closeRight()
break
case 'e':
closeAll()
break
}
}
三、实现效果图
总结
基于Vue+Element Plus实现快速导航完成了，主要涉及到的主要涉及到的知识点有Vue3、Vuex、Element Plus和Router，需要注意的就是计算下表的逻辑，还有就是快速导航绑定Dropdown组件的地方。如果有更好的实现方式或有疑问的靓仔们评论区留言。
