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

This article Xiaobian for you to introduce in detail "vue how to achieve the top of the management system tags browsing history", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to achieve the management system top tags browsing history" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

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

Turn off other

Import elementResizeDetectorMaker from "element-resize-detector"

Export default {

Data () {

Return {

/ / is there an arrow?

ArrowVisible: true

/ / number of clicks

Num: 0

Active: 0

Tags: []

/ / elements of the right button

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: {

/ / the monitoring visual area is wide, and the browser window size is changed.

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

})

}

/ / current selection page

This.active = this.tags.findIndex (tag = > tag.name = = currentPgae.name)

}

/ / close the label

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 =-- TranslateX (- ${this.num * 200} px)--

}

}

/ / right button

HandleClickToRight () {

/ / the last tag measures the distance on the right side 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

}

}

Highlight

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.

Read here, this article "how to achieve the top of the management system vue tags browsing history" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, 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.