不用任何vuex，乱七八糟的方法，全在一个文件，粘贴即用
放到你想要的位置即可（此demo,放在了面包屑上面）
先安装 （监听某dom元素大小的包）
npm install element-resize-detector
tags.vue
<template>
<div>
<div class="tags">
<!-- 左箭头 -->
<div
class="arrow arrow_left"
v-show="arrowVisible"
@click="handleClickToLeft"
>
<i class="el-icon-arrow-left"></i>
</div>
<!-- 标签内容 -->
<div class="tags_content" ref="box">
<span ref="tags">
<el-tag
v-for="（tag, index） in tags"
:key="tag.name"
:class="[active == index ? 'active top_tags' : 'top_tags']"
effect="dark"
:closable="tag.name != 'Firstpage1'"
@close="handleClose（index, tag）"
@click="clickTag（index, tag）"
@contextmenu.native.prevent="handleClickContextMenu（index, tag）"
>
{{ $t（"router." + tag.name） }}
</el-tag>
</span>
</div>
<!-- 右箭头 -->
<div
class="arrow arrow_right"
v-show="arrowVisible"
@click="handleClickToRight"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<!-- 右键菜单 -->
<ul
v-show="contextMenu.isShow"
:style="{ left: contextMenu.menuLeft, top: '96px' }"
class="el-dropdown-menu el-popper"
x-placement="bottom-end"
>
<li
v-if="this.active == this.contextMenu.index"
class="el-dropdown-menu__item"
@click="refresh"
>
刷新
</li>
<li class="el-dropdown-menu__item" @click="closeRightTag">
关闭右侧
</li>
<li class="el-dropdown-menu__item" @click="closeOtherTag">
关闭其它
</li>
<div x-arrow="" class="popper__arrow" style="left: 44px;"></div>
</ul>
</div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";
export default {
data（） {
return {
// 是否有箭头
arrowVisible: true,
// 点击次数
num: 0,
active: 0,
tags: [],
// 右键的元素
contextMenu: {
index: 0,
tag: {},
menuLeft: 0,
isShow: false
}
};
},
watch: {
$route（） {
this.getThisPage（）;
},
tags（） {
this.listenFun（this.$refs.tags, "tags"）;
}
},
mounted（） {
this.listenFun（this.$refs.box, "box"）;
var that = this;
document.addEventListener（"click", function（e） {
that.contextMenu.isShow = false;
}）;
},
methods: {
// 监听可视区域宽，浏览器窗口大小改变执行
listenFun（monitor, dom） {
let boxWidth = this.$refs.box.offsetWidth,
tagsWidth = this.$refs.tags.offsetWidth,
erd = elementResizeDetectorMaker（）;
erd.listenTo（monitor, ele => {
this.$nextTick（（） => {
if （
（dom == "box" && ele.offsetWidth >= tagsWidth） ||
（dom == "tags" && ele.offsetWidth <= boxWidth）
） {
this.arrowVisible = false;
this.$refs.box.style.paddingLeft = "16px";
this.$refs.box.style.paddingRight = "16px";
this.$refs.box.style.transform = "TranslateX（0px）";
this.num = 0;
} else {
this.arrowVisible = true;
this.$refs.box.style.paddingLeft = "56px";
this.$refs.box.style.paddingRight = "56px";
}
}）;
}）;
},
// 判断当前页
getThisPage（） {
let currentPgae = this.$route;
// 判断tags里是否有当前页面
var index = this.tags.findIndex（tag => tag.name == currentPgae.name）;
if （index == -1） {
this.tags.push（{
name: currentPgae.name,
path: currentPgae.path
}）;
}
// 当前选择页
this.active = this.tags.findIndex（tag => tag.name == currentPgae.name）;
},
// 关闭标签
handleClose（index, tag） {
this.tags.splice（this.tags.indexOf（tag）， 1）;
if （index == this.tags.length） {
this.active = index - 1;
this.$router.push（this.tags[index - 1].path）;
} else {
this.$router.push（this.tags[index].path）;
}
},
// 点击标签
clickTag（index, tag） {
this.active = index;
this.$router.push（tag.path）;
},
// 左侧按钮
handleClickToLeft（） {
if （this.num > 0） {
this.num--;
this.$refs.box.style.transform = ——TranslateX（-${this.num * 200}px）——;
}
},
// 右侧按钮
handleClickToRight（） {
// 最后一个标签右测距离浏览器左侧距离
let lastChild = document
.querySelectorAll（".top_tags"）
[this.tags.length - 1].getBoundingClientRect（）。right;
// 可视窗口的宽
let bodyWidth = document.body.offsetWidth;
// 右侧箭头48+右侧边距16
if （bodyWidth - lastChild <= 64） {
this.num++;
this.$refs.box.style.transform = ——TranslateX（-${this.num * 200}px）——;
}
},
// 右键
handleClickContextMenu（index, tag） {
this.contextMenu.isShow = true;
this.contextMenu.index = index;
this.contextMenu.tag = tag;
let isTag = document
.querySelectorAll（".top_tags"）
[index].getBoundingClientRect（）;
this.contextMenu.menuLeft = isTag.left - 48 + isTag.width / 2 + "px";
},
// 刷新
refresh（） {
this.$router.go（0）;
},
// 关闭其他
closeOtherTag（） {
let tagsLin = this.tags.length,
{ index, tag, menuLeft } = this.contextMenu;
if （index != 0） {
this.tags = [
{
name: "Firstpage1",
path: "/First/page1"
},
{
name: tag.name,
path: tag.path
}
];
} else {
this.tags = [
{
name: "Firstpage1",
path: "/First/page1"
}
];
}
this.active = index;
this.$router.push（tag.path）;
},
// 关闭右侧
closeRightTag（） {
let tagsLin = this.tags.length,
{ index, tag, menuLeft } = this.contextMenu;
this.tags.splice（index + 1, tagsLin - index）;
this.active = index;
this.$router.push（tag.path）;
}
},
created（） {
// 监听页面刷新
window.addEventListener（"beforeunload", e => {
localStorage.setItem（
"tagInfo",
JSON.stringify（{
active: this.active,
tags: this.tags
}）
）;
}）;
let tagInfo = localStorage.getItem（"tagInfo"）
? JSON.parse（localStorage.getItem（"tagInfo"））
: {
active: 0,
tags: [
{
name: "Firstpage1",
path: "/First/page1"
}
]
};
this.active = tagInfo.active;
this.tags = tagInfo.tags;
}
};
</script>
<style lang="less" scoped>
/deep/.el-tag--dark {
border-color: transparent;
}
/deep/.el-tag--dark .el-tag__close {
color: #86909c;
font-size: 16px;
}
/deep/.el-tag--dark .el-tag__close:hover {
background: #e7eaf0;
}
.tags {
position: relative;
overflow: hidden;
.arrow {
width: 48px;
text-align: center;
cursor: pointer;
background: #fff;
position: absolute;
z-index: 1;
&_left {
left: 0;
top: 0;
}
&_right {
right: 0;
top: 0;
}
}
&_content {
transition: 0.3s;
white-space: nowrap;
// padding: 0 16px;
}
.top_tags {
margin-right: 8px;
cursor: pointer;
background: #fff;
font-size: 12px;
font-weight: 400;
color: #1d2129;
}
.top_tags:hover,
.active,
.arrow:hover {
background: #e7eaf0;
}
}
</style>
重点
需要修改的地方
currentPgae.name 是路由结构的name，判断有无存在，没有就添加，有就定位到上面，根据项目修改
监听刷新时，去本地存储 tags 和 当前页面的active，Ftistpage1 改成自己的首页即可
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64344.shtml
