Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.