Vue实现多页签组件
作者：菜工
这篇文章主要介绍了Vue实现多页签组件的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
直接看效果，增加了右键菜单，分别有重新加载、关闭左边、关闭右边、关闭其他功能。
也可以到我的github上看看代码（如果觉得这个组件有用的话，别忘了顺手给个小星星）
代码：https://github.com/Caijt/VuePageTab
演示：https://caijt.github.io/VuePageTab/
我这个多页签组件里面的删除缓存的方法不是使用keep-alive组件自带的include、exculde结合的效果，而是使用暴力删除缓存的方法，这个在上个博客中也有提到，用这种方法的话，可以实现更完整的多页签功能，例如同个路由可以根据参数的不同同时打开不同的页签，也能不用去写那些路由的name值。
先直接看组件代码（里面用了一些element-ui的组件，如果你们不用element-ui的话。可以去掉，自己实现）
<template>
<div class="__common-layout-pageTabs">
<el-scrollbar>
<div class="__tabs">
<div
class="__tab-item"
v-for="item in openedPageRouters"
:class="{
'__is-active': item.fullPath == $route.fullPath,
}"
:key="item.fullPath"
@click="onClick(item)"
@contextmenu.prevent="showContextMenu($event, item)"
>
{{ item.meta.title }}
<span
class="el-icon-close"
@click.stop="onClose(item)"
@contextmenu.prevent.stop=""
:style="openedPageRouters.length <= 1 ? 'width:0;' : ''"
></span>
</div>
</div>
</el-scrollbar>
<div v-show="contextMenuVisible">
<ul
:style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
class="__contextmenu"
>
<li>
<el-button type="text" @click="reload()" size="mini">
重新加载
</el-button>
</li>
<li>
<el-button
type="text"
@click="closeOtherLeft"
:disabled="false"
size="mini"
>关闭左边</el-button
>
</li>
<li>
<el-button
type="text"
@click="closeOtherRight"
:disabled="false"
size="mini"
>关闭右边</el-button
>
</li>
<li>
<el-button type="text" @click="closeOther" size="mini"
>关闭其他</el-button
>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
keepAliveComponentInstance: {}, //keep-alive控件实例对象
blankRouteName: {
type: String,
default: "blank",
}, //空白路由的name值
},
data() {
return {
contextMenuVisible: false, //右键菜单是否显示
contextMenuLeft: 0, //右键菜单显示位置
contextMenuTop: 0, //右键菜单显示位置
contextMenuTargetPageRoute: null, //右键所指向的菜单路由
openedPageRouters: [], //已打开的路由页面
};
},
watch: {
//当路由变更时，执行打开页面的方法
$route: {
handler(v) {
this.openPage(v);
},
immediate: true,
},
},
mounted() {
//添加点击关闭右键菜单
window.addEventListener("click", this.closeContextMenu);
},
destroyed() {
window.removeEventListener("click", this.closeContextMenu);
},
methods: {
//打开页面
openPage(route) {
if (route.name == this.blankRouteName) {
return;
}
let isExist = this.openedPageRouters.some(
(item) => item.fullPath == route.fullPath
);
if (!isExist) {
let openedPageRoute = this.openedPageRouters.find(
(item) => item.path == route.path
);
//判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
if (!route.meta.canMultipleOpen && openedPageRoute != null) {
this.delRouteCache(openedPageRoute.fullPath);
this.openedPageRouters.splice(
this.openedPageRouters.indexOf(openedPageRoute),
1,
route
);
} else {
this.openedPageRouters.push(route);
}
}
},
//点击页面标签卡时
onClick(route) {
if (route.fullPath !== this.$route.fullPath) {
this.$router.push(route.fullPath);
}
},
//关闭页面标签时
onClose(route) {
let index = this.openedPageRouters.indexOf(route);
this.delPageRoute(route);
if (route.fullPath === this.$route.fullPath) {
//删除页面后，跳转到上一页面
this.$router.replace(
this.openedPageRouters[index == 0 ? 0 : index - 1]
);
}
},
//右键显示菜单
showContextMenu(e, route) {
this.contextMenuTargetPageRoute = route;
this.contextMenuLeft = e.layerX;
this.contextMenuTop = e.layerY;
this.contextMenuVisible = true;
},
//隐藏右键菜单
closeContextMenu() {
this.contextMenuVisible = false;
this.contextMenuTargetPageRoute = null;
},
//重载页面
reload() {
this.delRouteCache(this.contextMenuTargetPageRoute.fullPath);
if (this.contextMenuTargetPageRoute.fullPath === this.$route.fullPath) {
this.$router.replace({ name: this.blankRouteName }).then(() => {
this.$router.replace(this.contextMenuTargetPageRoute);
});
}
},
//关闭其他页面
closeOther() {
for (let i = 0; i < this.openedPageRouters.length; i++) {
let r = this.openedPageRouters[i];
if (r !== this.contextMenuTargetPageRoute) {
this.delPageRoute(r);
i--;
}
}
if (this.contextMenuTargetPageRoute.fullPath != this.$route.fullPath) {
this.$router.replace(this.contextMenuTargetPageRoute);
}
},
//根据路径获取索引
getPageRouteIndex(fullPath) {
for (let i = 0; i < this.openedPageRouters.length; i++) {
if (this.openedPageRouters[i].fullPath === fullPath) {
return i;
}
}
},
//关闭左边页面
closeOtherLeft() {
let index = this.openedPageRouters.indexOf(
this.contextMenuTargetPageRoute
);
let currentIndex = this.getPageRouteIndex(this.$route.fullPath);
if (index > currentIndex) {
this.$router.replace(this.contextMenuTargetPageRoute);
}
for (let i = 0; i < index; i++) {
let r = this.openedPageRouters[i];
this.delPageRoute(r);
i--;
index--;
}
},
//关闭右边页面
closeOtherRight() {
let index = this.openedPageRouters.indexOf(
this.contextMenuTargetPageRoute
);
let currentIndex = this.getPageRouteIndex(this.$route.fullPath);
for (let i = index + 1; i < this.openedPageRouters.length; i++) {
let r = this.openedPageRouters[i];
this.delPageRoute(r);
i--;
}
if (index < currentIndex) {
this.$router.replace(this.contextMenuTargetPageRoute);
}
},
//删除页面
delPageRoute(route) {
let routeIndex = this.openedPageRouters.indexOf(route);
if (routeIndex >= 0) {
this.openedPageRouters.splice(routeIndex, 1);
}
this.delRouteCache(route.fullPath);
},
//删除页面缓存
delRouteCache(key) {
let cache = this.keepAliveComponentInstance.cache;
let keys = this.keepAliveComponentInstance.keys;
for (let i = 0; i < keys.length; i++) {
if (keys[i] == key) {
keys.splice(i, 1);
if (cache[key] != null) {
delete cache[key];
}
break;
}
}
},
},
};
</script>
<style lang="scss">
.__common-layout-pageTabs {
.__contextmenu {
// width: 100px;
margin: 0;
border: 1px solid #e4e7ed;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 14px;
color: #333;
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);
li {
margin: 0;
padding: 0px 15px;
&:hover {
background: #f2f2f2;
cursor: pointer;
}
button {
color: #2c3e50;
}
}
}
$c-tab-border-color: #dcdfe6;
position: relative;
&::before {
content: "";
border-bottom: 1px solid $c-tab-border-color;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.__tabs {
display: flex;
.__tab-item {
white-space: nowrap;
padding: 8px 6px 8px 18px;
font-size: 12px;
border: 1px solid $c-tab-border-color;
border-left: none;
border-bottom: 0px;
line-height: 14px;
cursor: pointer;
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:first-child {
border-left: 1px solid $c-tab-border-color;
border-top-left-radius: 2px;
margin-left: 10px;
}
&:last-child {
border-top-right-radius: 2px;
margin-right: 10px;
}
&:not(.__is-active):hover {
color: #409eff;
.el-icon-close {
width: 12px;
margin-right: 0px;
}
}
&.__is-active {
padding-right: 12px;
border-bottom: 1px solid #fff;
color: #409eff;
.el-icon-close {
width: 12px;
margin-right: 0px;
margin-left: 2px;
}
}
.el-icon-close {
width: 0px;
height: 12px;
overflow: hidden;
border-radius: 50%;
font-size: 12px;
margin-right: 12px;
transform-origin: 100% 50%;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
vertical-align: text-top;
&:hover {
background-color: #c0c4cc;
color: #fff;
}
}
}
}
}
</style>
这个组件它需要两个属性，一个是keepAliveComponentInstance（keep-alive的控件实例对象），blankRouteName（空白路由的名称）
为什么我需要keep-alive的控件实例对象呢，因为这个对象里面有两个属性，一个是cache，一个是keys，存储着keep-alive的缓存的数据，有了这个对象，我就能在页签关闭时手动删除缓存。那这个对象怎么获取呢，如下所示，在keep-alive所在的父页面上的mounted事件上进行获取（如果keep-alive跟多页签组件不在同一个父页面，那可能就得借用vuex来传值了）
<template>
<div id="app">
<page-tabs :keep-alive-component-instance="keepAliveComponentInstance" />
<div ref="keepAliveContainer">
<keep-alive>
<router-view :key="$route.fullPath" />
</keep-alive>
</div>
</div>
</template>
<script>
import pageTabs from "./components/pageTabs.vue";
export default {
name: "App",
components: {
pageTabs,
},
mounted() {
if (this.$refs.keepAliveContainer) {
this.keepAliveComponentInstance = this.$refs.keepAliveContainer.childNodes[0].__vue__;//获取keep-alive的控件实例对象
}
},
data() {
return {
keepAliveComponentInstance: null,
};
}
};
</script>
而空白路由的名称，是干什么，主要我要实现刷新当前页面的功能，我们知道vue是不允许跳转到当前页面，那么我就想我先跳转到别的页面，再跳转回回来的页面，不就也实现刷新的效果了。（当然我用的是relpace，所以不会产生历史记录）
注：这个空白路由并不是固定定义在根路由上，需根据多页签组件所在位置，假如你有一个根router-view，还有一个布局组件，这个组件里面也有一个子router-view，多页签组件就在这个布局组件里，那么空白路由就需定义在布局组件对应的路由的children里面了
还有这个组件会根据路由对象的meta对象进行不同的配置，如下所示
let router = new Router({
routes: [
//这个是空白页面，重新加载当前页面会用到
{
name: "blank",
path: "/blank",
},
{
path: "/a",
component: A,
meta: {
title: "A页面", //页面标题
canMultipleOpen: true //支持根据参数不同多开不同页签，如果你需要/a跟/a?v=123都分别打开两个页签，请设置为true，否则就只会显示一个页签，后打开的会替换到前打开的页签
}
}
}
以上就是Vue实现多页签组件的详细内容，更多关于Vue实现多页签组件的资料请关注脚本之家其它相关文章！