vue 管理系统顶部tags浏览历史实现

1、vue 管理系统顶部tags浏览历史实现不用任何vuex，污七八糟的办法，全在一个文件，粘贴即用 放到你想要的位置即可（此demo,放在了面包屑上面） 先安装 （监听某dom元素大小的包） npm install element-resize-detector tags.vue $t（"router." + ） 刷新 关闭右侧 关闭其它 import elementresizedetectormaker from "element-resize-detector" export default data（） return / 是否有箭头

2、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; doc

3、ument.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.

4、$nexttick（） = if （ （dom = "box" && ele.offsetwidth = tagswidth） | （dom = "tags" && ele.offsetwidth = currentp）; if （index = -1） this.tags.push（ name: currentp, path: currentpgae.path ）; / 当前挑选页 this.active = this.tags.findindex（tag = tag.n

5、ame = currentp）; , / 关闭标签 handleclose（index, tag） this.tags.splice（this.tags.indexof（tag）， 1）; if （index = this.tags.length） this.active = index - 1; this.$router.push（this.tagsindex - 1.path）; else this.$router.push（this.tagsindex.path）; , / 点击标签 clicktag（index, tag） this.active = index; th

6、is.$router.push（tag.path）; , / 左侧按钮 handleclicktoleft（） if （this.num 0） this.num-; this.$refs.box.style.transform = ——translatex（-$this.num * 200px）—— , / 右侧按钮 handleclicktoright（） / 最后一个标签右测距离扫瞄器左侧距离 let lastchild = document .queryselectorall（".top_tags"） this.tags

7、.length - 1.getboundingclientrect（）。right; / 可视窗口的宽 let bodywidth = document.body.offsetwidth; / 右侧箭头48+右侧边距16 if （bodywidth - lastchild localstorage.setitem（ "taginfo", json.stringify（ active: this.active, tags: this.tags ） ）; ）; let taginfo = localstorage.getitem（"taginfo"） ? j

8、son.parse（localstorage.getitem（"taginfo"） : active: 0, tags: name: "firstpage1", path: "/first/page1" ; this.active = taginfo.active; this.tags = taginfo.tags; ; /deep/.el-tag-dark border-color: transparent; /deep/.el-tag-dark .el-tag_close color: 86909c; font-size: 16p

9、x; /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