前言

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

一、分析

快速导航具备的功能点

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

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

二、实现

基于Element Plus提供的Tabs 组件和Dropdown组件实现页面效果。代码如下

 <template><div class="fast-nav"><el-tabsv-model="router.currentRoute.value.name"type="card"class="tabs"closable@tab-click="handleClick"@contextmenu.prevent.native="openContextMenu($event)"@tab-remove="removeTab"><el-tab-panev-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()})

 //页面获取tabListimport {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)//删除当前选中tabtabList.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且集合长度大于2if (index === 1 && tabList.value.length > 2) {tabList.value.splice(2);}//下表大于1if (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)//判断下表是否大于1if (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, tabList.value.length - index);}
}
//关闭所有tab
const closeAll = () => {//判断总长度是否大于1if (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()breakcase 'b':closeOther()breakcase 'c':closeLeft()breakcase 'd':closeRight()breakcase 'e':closeAll()break}
}

三、实现效果图

总结

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

基于Vue+Element Plus实现快速导航相关推荐

RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
基于vue + element 的后台管理系统
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发.基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录,引用Elem ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在src\views目录下创建主页面Home.vue,主要是管理系统页面布局,头部和左侧导航栏. 一.Home.vue 页面 1.1 Home.vue 页面html部分: < ...
基于vue+element实现多级菜单动态生成
使用element的NavMenu组件+vue的组件递归实现动态生成菜单. 首先创建对象记录菜单的标题.链接.子集等信息. menus: [{title: "首页",icon: & ...
闲云旅游网02（基于vue+element ui）
首页开发项目GitHub地址:https://github.com/q2419068625/xianyun 新建公共组件在components中新建应用统一的头部组件和页脚组件. 在默认布局中la ...

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

文章目录

前言

一、分析

二、实现

三、实现效果图

总结

基于Vue+Element Plus实现快速导航相关推荐

最新文章

热门文章