功能：
- 支持刷新当前、关闭其他、关闭全部、关闭当前
- 支持打开多个相同path不同路由参数的页面，将fullPath作为路由页面唯一值
UI组件：
使用的是element-plus中的el-tab组件，结构目录如下
代码实现：
下面是 TagsView中的 index.vue
<template>
<div class="m-tags-view" ref="containerDom">
<div class="tags-view">
<el-tabs
v-model="activeTabsValue"
@contextmenu.prevent.stop="openMenu($event)"
type="card"
@tab-click="tabClick"
@tab-remove="removeTab"
>
<!-- && item.meta.affix -->
<el-tab-pane
v-for="item in routerTabList"
:key="item.fullPath"
:path="item.fullPath"
:label="item.title"
:name="item.fullPath"
:closable="!(item.meta && routerTabList.length == 1)"
>
<template #label>
{{ item.meta.title }}
</template>
</el-tab-pane>
</el-tabs>
</div>
<div class="right-btn">
<MoreButton ref="moreBtnRef" />
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, watch, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { TabsPaneContext } from "element-plus";
import MoreButton from "./components/MoreButton.vue";
import { useRouterTab } from "@/store/routeTab";
const route = useRoute();
const router = useRouter();
const routerTabList: any = computed(() => useRouterTab().routerTabList);
const addTags = () => {
const { name } = route;
if (name === "login") {
return;
}
if (name) {
useRouterTab().addView(route);
}
return false;
};
const moreBtnRef = ref();
const containerDom = ref();
const openMenu = (e: any) => {
let tabFullPath;
if (e.srcElement.id) {
tabFullPath = e.srcElement.id.split("-")[1];
}
moreBtnRef.value.open(tabFullPath);
};
let affixTags = ref([]);
function filterAffixTags(routes: any, basePath = "/") {
let tags: any = [];
routes.forEach((route: any) => {
if (route.meta && route.meta.affix) {
tags.push({
fullPath: basePath + route.fullPath,
path: basePath + route.path,
name: route.name,
meta: { ...route.meta },
});
}
if (route.children) {
const tempTags = filterAffixTags(route.children, route.path);
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags];
}
}
});
return tags;
}
const initTags = () => {
let routesNew = routerTabList.value;
let affixTag = (affixTags.value = filterAffixTags(routesNew));
for (const tag of affixTag) {
if (tag.name) {
useRouterTab().addRouterList(tag);
}
}
};
onMounted(() => {
initTags();
addTags();
});
watch(route, () => {
addTags();
});
const activeTabsValue = computed({
get: () => {
return useRouterTab().activeTabsValue;
},
set: (val) => {
useRouterTab().setTabsMenuValue(val);
},
});
const tabClick = (tabItem: TabsPaneContext) => {
let path = tabItem.props.name as string;
router.push(path);
};
const isActive = (path: any) => {
return path === route.fullPath;
};
const removeTab = async (activeTabPath: string) => {
await useRouterTab().delView(activeTabPath, isActive(activeTabPath));
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs__item) {
min-width: 100px !important;
}
.m-tags-view {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
background: white;
.right-btn {
height: 100%;
flex-shrink: 0;
}
}
.tags-view {
flex: 1;
overflow: hidden;
box-sizing: border-box;
}
.tags-view {
.el-tabs--card :deep(.el-tabs__header) {
box-sizing: border-box;
height: 40px;
padding: 0 10px;
margin: 0;
}
:deep(.el-tabs) {
.el-tabs__nav {
border: none;
}
.el-tabs__header .el-tabs__item {
border: none;
color: #cccccc;
}
.el-tabs__header .el-tabs__item.is-active {
color: blue;
border-bottom: 2px solid blue;
}
}
}
</style>
右键显示功能菜单，写成了一个组件，在上面文件中进行引用
moreButton.vue
<template>
<transition name="el-zoom-in-top">
<ul v-show="visible" :style="getContextMenuStyle" class="contextmenu">
<li @click="refresh">
<el-icon :size="14"><Refresh /></el-icon> <span>刷新当页</span>
</li>
<li @click="closeCurrentTab">
<el-icon :size="14"><FolderRemove /></el-icon> <span>关闭当前</span>
</li>
<li @click="closeOtherTab">
<el-icon :size="14"><Close /></el-icon> <span>关闭其他</span>
</li>
<!-- <li @click="closeAllTab">
<el-icon :size="14"><FolderDelete /></el-icon> <span>关闭所有</span>
</li> -->
</ul>
</transition>
</template>
<script lang="ts" setup>
import { computed, type CSSProperties } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useRouterTab } from "@/store/routeTab";
const router = useRouter();
const route = useRoute();
const visitedViews: any = computed(() => useRouterTab().visitedViews);
const { x, y } = useMouse();
let visible = ref(false);
const left = ref(0);
const top = ref(0);
const currentPath = ref("");
const open = (fullPath: string) => {
visible.value = true;
currentPath.value = fullPath;
left.value = x.value;
top.value = y.value;
};
const closeMenu = () => {
visible.value = false;
};
const getContextMenuStyle = computed((): CSSProperties => {
return { left: left.value + 20 + "px", top: top.value + 10 + "px" };
});
watch(visible, (value) => {
if (value) {
document.body.addEventListener("click", closeMenu);
} else {
document.body.removeEventListener("click", closeMenu);
}
});
defineExpose({ open });
// 关闭当前
const closeCurrentTab = (event: any) => {
useRouterTab().toLastView(currentPath.value);
useRouterTab().delView(currentPath.value);
};
// 关闭其他
const closeOtherTab = async () => {
useRouterTab().delOtherViews(currentPath.value, route.fullPath);
};
// 刷新当前
const refresh = () => {
useRouterTab().setReload(currentPath.value);
};
// 关闭所有 去模型管理
const closeAllTab = async () => {
await useRouterTab().delAllViews();
useRouterTab().goHome();
};
</script>
<style lang="scss" scoped>
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
display: flex;
align-items: center;
span {
padding-left: 4px;
}
&:hover {
background: #eee;
color: #4248f4 !important;
}
}
}
.more {
background-color: blue;
color: white;
.tags-view-item {
display: flex;
align-items: center;
}
}
</style>
@/store/tagsView
用到的store里面的ts
routeTab.ts
import router from "@/router";
import { defineStore } from "pinia";
import { useRequest } from "@/hooks/use-request";
import { messageError, messageConfirm } from "@/utils/element-utils/notification-common";
import { isBtnPermission } from "@/utils/permission";
import { ElMessageBox } from "element-plus";
export const useRouterTab = defineStore("routerList", {
state: () => ({
routerTabList: [] as any,
isReload: true,
activeTabsValue: "/",
}),
getters: {
showTabList(state: any) {
return state.routerTabList.filter((e: any) => !e.hidden);
},
},
actions: {
setTabsMenuValue(val: any) {
this.activeTabsValue = val;
},
addView(view: any) {
this.addRouterList(view);
},
addRouterList(view: any) {
this.setTabsMenuValue(view.fullPath);
if (this.routerTabList.some((v: any) => v.fullPath === view.fullPath)) return; // 不重复添加
if (JSON.stringify(view.meta) != "{}") {
this.routerTabList.push(Object.assign({}, view));
}
},
// 删除当前，过滤掉本身的标签
delView(activeTabPath: any, flag?: boolean) {
return new Promise((resolve) => {
this.routerTabList = this.routerTabList.filter((v: any) => {
return v.fullPath !== activeTabPath || v.meta.affix;
});
this.toLastView(activeTabPath)
resolve({
routerTabList: [...this.routerTabList],
});
});
},
// 关闭标签后，跳转标签
toLastView(activeTabPath: any) {
const index = this.routerTabList.findIndex((item: any) => item.fullPath === activeTabPath);
const nextTab: any = this.routerTabList[index + 1] || this.routerTabList[index - 1];
if (!nextTab) return;
router.push(nextTab.fullPath);
this.addRouterList(nextTab);
},
// 刷新
setReload(fullPath: any) {
const index = this.routerTabList.findIndex((item: any) => item.fullPath === fullPath);
this.routerTabList[index].code = Date.now(); //用于改变keep-alive中的key值实现刷新
},
clearVisitedView() {
this.delAllViews();
},
// 删除全部
delAllViews() {
return new Promise((resolve) => {
this.routerTabList = this.routerTabList.filter((v: any) => v.meta.affix);
resolve([...this.routerTabList]);
});
},
// 删除其他
delOtherViews(fullPath: any, currentPath: any) {
// affix是用来设置路由表中的meta，表示该路由是否是固定路由，固定则不删
const op = () => {
this.routerTabList = this.routerTabList.filter((item: any) => {
return item.fullPath === fullPath || item.meta.affix;
});
router.push(fullPath);
};
this.isDelViews("other", op);
},
// 判断是否可以关闭全部和关闭其他
isDelViews(type: string, callback: () => void) {
if (useRouterTab().SaveRoutes?.length != 0) {
messageConfirm(
`存在未保存的模型建模，无法${type == "all" ? "全部关闭" : "关闭其他"}，是否继续？`,
{
confirmButtonText: `${type == "all" ? "全部关闭" : "关闭其他"}`,
cancelButtonText: `取消`,
},
() => {
callback();
}
);
} else {
callback();
}
},
goHome() {
this.activeTabsValue = "/";
router.push({ path: "/" }); //semantic/manage/model
},
},
// persist: {
// enabled: true,
// strategies: [
// {
// key: "routerTabList1",
// storage: sessionStorage,
// paths: ["routerTabList"],
// },
// ],
// },
});
注意：
由于本系统的keepAlive实现没有用页面的name，而是用v-if条件判断哪些页面缓存就套个keepalive的壳，否则正常展示，因此，上面刷新的逻辑原理，需要配合下面的key值设置
如果，你们是通过设置页面name，结合include实现的缓存，就像下面这种形式，那么可以用v-if实现刷新
刷新的逻辑就是，在store里面存一个isReload的变量。通过设置true false来实现刷新。
// 刷新
setReload() {
this.isReload = false
setTimeout(() => {
this.isReload = true
}, 50)
},
有问题评论区留言或私信哦~