How does Vue implement the top tags browsing history
This article mainly shows you "Vue how to achieve the top tags browsing history", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Vue how to achieve the top tags browsing history" this article.
Nonsense
Demo Preview
Realized function
There is a home page by default and cannot be closed.
Click the routing menu to determine whether it exists, add it if not, and navigate to it.
Click Jump, click X to close
Closes the current page and automatically jumps to the next tag page
If the current page is the last, by default skip to the previous tag page
Right-click menu, refresh, close right, close all
Dynamically judge that the tags is much longer, and when it can not be put down, the buttons on the left and right sides appear, and disappear automatically when it decreases.
Dynamic judgment window zooms in and out, and automatically judges whether there are buttons on the left and right sides.
Text
Do not use any vuex, messy methods, all in one file, paste and use
Just put it in the position you want (this demo, on top of the crumbs)
Install first (listen for a package the size of a dom element)
Npm install element-resize-detector
Tags.vue
{{$t ("router." + tag.name)}} refresh close the right side to close other import elementResizeDetectorMaker from "element-resize-detector" Export default {data () {return {/ / whether there is an arrow arrowVisible: true, / / number of clicks num: 0, active: 0, tags: [], / / right element 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: {/ / listen to the wide visual area, change the size of the browser window and execute 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 tag.name = = currentPgae.name); if (index = =-1) {this.tags.push ({name: currentPgae.name, path: currentPgae.path}) } / / the current selection page this.active = this.tags.findIndex (tag = > tag.name = = currentPgae.name);}, / / close the tag 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)}}, / / Click the label clickTag (index, tag) {this.active = index; this.$router.push (tag.path);}, / / left button handleClickToLeft () {if (this.num > 0) {this.num-- This.$refs.box.style.transform = `SelectorAll (- ${this.num * 200} px) `;}}, / / right button handleClickToRight () {/ / the last label right measures the distance to the left of the browser let lastChild = document .querySelectorAll (".top _ tags") [this.tags.length-1] .getboundingClientRect (). Right / / the width of the visual window let bodyWidth = document.body.offsetWidth; / / right arrow 48 + right margin 16 if (bodyWidth-lastChild {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;}} / 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;}} key points
Areas that need to be modified
CurrentPgae.name is the name of the routing structure. Judge whether it exists or not, add it if not, locate it above, and modify it according to the project.
When listening for refresh, you can change the local storage of tags and the active,Ftistpage1 of the current page to your own home page.
The above is all the content of the article "how Vue achieves the top tags browsing history". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
