这篇文章主要为大家展示了“Vue如何实现顶部tags浏览历史”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何实现顶部tags浏览历史”这篇文章吧。
废话
demo预览
实现的功能
默认有首页，不能关闭
点击路由菜单，判断有无存在，没有就添加，有就定位到上面
点击跳转，点击X可关闭
关闭当前页，自动跳到下一个tag页面
如果当前页在最后一个，默认跳到上一个tag页面
右键菜单，刷新，关闭右侧，关闭所有
动态判断tags长多，放不下时，出现左右两侧按钮，减少时自动消失
动态判断窗口放大缩小，自动判断有无左右两侧按钮
正文
不用任何vuex，乱七八糟的方法，全在一个文件，粘贴即用
放到你想要的位置即可(此demo,放在了面包屑上面)
先安装 (监听某dom元素大小的包)
npm install element-resize-detectortags.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" : 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" ></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 改成自己的首页即可
以上是“Vue如何实现顶部tags浏览历史”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
