How to manage the browsing history of tags at the top of the system by vue
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.
