基于Vue+Element Plus实现快速导航_element ui pius 导航

---

前言

快速导航对于前端开发的靓仔们应该是很熟悉了，他能快速的切换到之前打开的页面，是系统更加灵活方便。我这里采用的是Vue+Element plus+Vuex+Router实现的快速导航，供大家参考。

---

一、分析

快速导航具备的功能点

1. 展示打开过的导航项
2. 点击导航项可以切换页面
3. 导航关闭
4. 导航关闭快捷方式（关闭当前、关闭其他、关闭左侧、关闭右侧和全部关闭）

样式方面完全采用的是Element Plus提供的Tabs 组件和Dropdown组件。

二、实现

1. 基于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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

2. 实现数据动态化
   采用Vuex存储tabList集合，在路由跳转时存入到tabList集合中，关闭页面时再删除tabList中的对应项实现动态化，具体代码如下

	//路由守卫监听路由变化存储路由信息到tbList中
	router.beforeEach(async (to, from, next) => {
		store.dispatch("tabList", to).then()
	})
1
2
3
4

	//页面获取tabList
	import {useStore} from "@/vuex/store";
	const store = useStore();	
	let tabList = ref(store.state.tabList)
1
2
3
4

3. 实现快捷方式相关功能，具体代码如下

//关闭指定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
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

三、实现效果图

---

总结

基于Vue+Element Plus实现快速导航完成了，主要涉及到的主要涉及到的知识点有Vue3、Vuex、Element Plus和Router，需要注意的就是计算下表的逻辑，还有就是快速导航绑定Dropdown组件的地方。如果有更好的实现方式或有疑问的靓仔们评论区留言。

---