Vue如何实现顶部tags浏览历史(tags,vue,开发技术)

废话

demo预览

实现的功能

默认有首页，不能关闭

点击路由菜单，判断有无存在，没有就添加，有就定位到上面

点击跳转，点击X可关闭

关闭当前页，自动跳到下一个tag页面

如果当前页在最后一个，默认跳到上一个tag页面

右键菜单，刷新，关闭右侧，关闭所有

动态判断tags长多，放不下时，出现左右两侧按钮，减少时自动消失

动态判断窗口放大缩小，自动判断有无左右两侧按钮

正文

不用任何vuex，乱七八糟的方法，全在一个文件，粘贴即用

放到你想要的位置即可(此demo,放在了面包屑上面)

先安装 (监听某dom元素大小的包)

npminstallelement-resize-detector

tags.vue

<template><div><divclass="tags"><!--左箭头--><divclass="arrowarrow_left"v-show="arrowVisible"@click="handleClickToLeft"><iclass="el-icon-arrow-left"></i></div><!--标签内容--><divclass="tags_content"ref="box"><spanref="tags"><el-tagv-for="(tag,index)intags":key="tag.name":class="[active==index?'activetop_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><!--右箭头--><divclass="arrowarrow_right"v-show="arrowVisible"@click="handleClickToRight"><iclass="el-icon-arrow-right"></i></div></div><!--右键菜单--><ulv-show="contextMenu.isShow":class="el-dropdown-menuel-popper"x-placement="bottom-end"><liv-if="this.active==this.contextMenu.index"class="el-dropdown-menu__item"@click="refresh">刷新</li><liclass="el-dropdown-menu__item"@click="closeRightTag">关闭右侧</li><liclass="el-dropdown-menu__item"@click="closeOtherTag">关闭其它</li><divx-arrow=""class="popper__arrow"></div></ul></div></template><script>importelementResizeDetectorMakerfrom"element-resize-detector";exportdefault{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");varthat=this;document.addEventListener("click",function(e){that.contextMenu.isShow=false;});},methods:{//监听可视区域宽,浏览器窗口大小改变执行listenFun(monitor,dom){letboxWidth=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(){letcurrentPgae=this.$route;//判断tags里是否有当前页面varindex=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(){//最后一个标签右测距离浏览器左侧距离letlastChild=document.querySelectorAll(".top_tags")[this.tags.length-1].getBoundingClientRect().right;//可视窗口的宽letbodyWidth=document.body.offsetWidth;//右侧箭头48+右侧边距16if(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;letisTag=document.querySelectorAll(".top_tags")[index].getBoundingClientRect();this.contextMenu.menuLeft=isTag.left-48+isTag.width/2+"px";},//刷新refresh(){this.$router.go(0);},//关闭其他closeOtherTag(){lettagsLin=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(){lettagsLin=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}));});lettagInfo=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><stylelang="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:016px;}.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 改成自己的首页即可