Sample code for implementing the history tag menu using vue+elementui+vuex+sessionStorage
|
Generally, after there is a menu on the left, there is a need to add a history tab menu to the upper part of the page. 1. Write a tagNav tag component 2. Add the meta attribute 3. Write the tag adding/deleting method in the store's mutation.js file and update the sessionStorage data in the method 4. Add components to the main page and keep-alive components to the outer layer of router-view. In my case, main.vue is the main page after login, and other menu pages are based on the routing of this page. 5. Write a mixins file: beforeRouteLeave callback, because it seems that the cache object of the sub-page can only be found in this callback. Import this file into main.js and add it to the 6. Add route monitoring to the left menu so that the left menu can locate and select the corresponding menu option when clicking the label menu 7. If clicking the tag menu is a route redirection menu, you need to add a route listener to obtain the route attribute of meta.title on the route page that triggers the redirection, then loop through the store array of tags in the create callback of the page and set meta.title to the tag name of the current redirection. Start code descriptionWrite a tagNav component
<style lang="less" scoped>
@import "./base.less";
.tags-nav {
display: flex;
align-items: stretch;
height: 40px;
padding: 2px 0;
background-color: @background-color;
a {
margin-right: 1px;
width: 24px;
}
a:hover {
color: @light-theme-color;
}
a:first-of-type {
margin-right: 4px;
}
a,
.dropdown-btn {
display: inline-block;
width:30px;
height: 36px;
color: @title-color;
background-color: @white;
text-align: center;
line-height: 36px;
position: relative;
z-index: 10;
}
.tags-wrapper {
flex: 1 1 auto;
position: relative;
.tags-wrapper-scroll {
position: absolute;
top: 0px;
left: 0;
z-index: 5;
height: 36px;
overflow: visible;
white-space: nowrap;
transition: all .3s ease-in-out;
.tag {
flex-shrink: 0;
cursor: pointer;
}
}
}
}
</style>
<template>
<div class="tags-nav">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="handleScroll('left')">
<icon name="angle-left"></icon>
</a>
<div class="tags-wrapper" ref="tagsWrapper">
<div class="tags-wrapper-scroll" ref="tagsWrapperScroll" :style="{ left: leftOffset + 'px' }">
<transition-group name="slide-fade">
<el-tag
class="tag slide-fade-item"
ref="tagsPageOpened"
v-for="(tag, index) in pageOpenedList"
:key="'tag_' + index"
:type="tag.selected ? '': 'info'"
:closable="tag.name!='basicDevice'"
:id="tag.name"
effect="dark"
:text="tag.name"
@close="closeTag(index, $event, tag.name)"
@click="tagSelected(index)"
>{{tag.title}}</el-tag>
</transition-group>
</div>
</div>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="handleScroll('right')">
<icon name="angle-right"></icon>
</a>
<!-- <el-dropdown class="dropdown-btn" @command="closeTags">
<span class="el-dropdown-link">
<icon name="angle-down"></icon>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="closeOthers">Close Others</el-dropdown-item>
<el-dropdown-item command="closeAll">Close All</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
<!-- <Dropdown placement="bottom-end" @on-click="closeTags">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="margin-right: 0;">
<icon name="angle-down"></icon>
</a>
<DropdownMenu slot="list">
<DropdownItem name="closeOthers">Close Others</DropdownItem>
<DropdownItem name="closeAll">Close All</DropdownItem>
</DropdownMenu>
</Dropdown> -->
</div>
</template>
<script>
export default {
data () {
return {
currentPageName: this.$route.name,
leftOffset: 0
}
},
props: {
pageOpenedList: {
type: Array
}
},
methods: {
closeTags (action) {
this.$emit('closeTags', action)
if (action === 'closeOthers') {
this.leftOffset = 0
}
},
closeTag (index, event, name) {
// Remove a single tag, and the tag on the home page cannot be removed if (index !== 0) {
this.$emit('closeTags', index,name)
}
if (this.currentPageName !== name) {
this.leftOffset = Math.min(0, this.leftOffset + event.target.parentNode.offsetWidth)
}
},
tagSelected (index) {
this.$emit('tagSelected', index)
},
checkTagIsVisible (tag) {
let visible = {
isVisible: false,
position: 'left'
}
const leftDiffValue = tag.offsetLeft + this.leftOffset
if (leftDiffValue < 0) {
return visible
}
const rightDiffValue = this.$refs.tagsWrapper.offsetWidth - this.leftOffset - tag.offsetWidth - tag.offsetLeft
if (leftDiffValue >= 0 && rightDiffValue >= 0) {
visible.isVisible = true
} else {
visible.position = 'right'
}
return visible
},
handleScroll (direction) {
// Get the tags that are critical in the visible area
let criticalTag = this.getCriticalTag(direaction)
switch (direaction) {
case 'left':
this.leftOffset = Math.min(this.$refs.tagsWrapper.offsetWidth - criticalTag.$el.offsetLeft, 0)
break
case 'right':
const diffValue1 = -(criticalTag.$el.offsetLeft + criticalTag.$el.clientWidth)
const diffvalue2 = -(this.$refs.tagsWrapperScroll.offsetWidth - this.$refs.tagsWrapper.offsetWidth)
this.leftOffset = Math.max(diffValue1, diffvalue2)
break
default:
break
}
},
getCriticalTag (direaction) {
let criticalTag
const refsTagList = this.$refs.tagsPageOpened
for (let tag of refsTagList) {
// Check if the tag is in the visible area if (this.checkTagIsVisible(tag.$el).isVisible) {
criticalTag = tag
if (direaction === 'left') {
break
}
}
}
return criticalTag
},
setTagsWrapperScrollPosition (tag) {
const visible = this.checkTagIsVisible(tag)
if (!visible.isVisible && visible.position === 'left') {
// The label is located on the left side of the visible area this.leftOffset = -tag.offsetLeft
} else {
// The tag is on the right side of the visible area or visible area this.leftOffset = Math.min(0, -(tag.offsetWidth + tag.offsetLeft - this.$refs.tagsWrapper.offsetWidth + 4))
}
}
},
mounted () {
// Initialize the tag position of the currently opened page const refsTag = this.$refs.tagsPageOpened
setTimeout(() => {
for (const tag of refsTag) {
if (tag.text === this.$route.name) {
const tagNode = tag.$el
this.setTagsWrapperScrollPosition(tagNode)
break
}
}
}, 1)
},
watch:
$route (to) {
this.currentPageName = to.name
this.$nextTick(() => {
const refsTag = this.$refs.tagsPageOpened
for (const tag of refsTag) {
if (tag.text === this.$route.name) {
const tagNode = tag.$el
this.setTagsWrapperScrollPosition(tagNode)
break
}
}
})
}
}
}
</script>
And the less files in the same directory
//color
@theme1-color: #515a6e;
@theme-color: #2d8cf0;
@light-theme-color: #5cadff;
@dark-theme-color: #2b85e4;
@info-color: #2db7f5;
@success-color: #19be6b;
@warning-color: #ff9900;
@error-color: #ed4014;
@title-color: #17233d;
@content-color: #515a6e;
@sub-color: #808695;
@disabled-color: #c5c8ce;
@border-color: #dcdee2;
@divider-color: #e8eaec;
@background-color: #f8f8f9;
@white: white;
// Spacing @padding: 16px;
//Default style* {
box-sizing: border-box;
}
a {
color: @theme-color;
}
a:hover {
color: @light-theme-color;
}
.dark-a {
color: @title-color;
}
// Clear float
.clear-float::after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
// animation.slide-fade-item {
transition: all 0.1s ease-in-out;
display: inline-block;
}
.slide-fade-enter, .slide-fade-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateX(-10px);
}
// Scroll bar style.menu-scrollbar::-webkit-scrollbar,
.common-scrollbar::-webkit-scrollbar {
/*Overall scroll bar style*/
width: 11px;
/*Height and width correspond to the size of the horizontal and vertical scroll bars respectively*/
height: 1px;
}
// Scroll bar style 1
.menu-scrollbar::-webkit-scrollbar-thumb {
/*Small square inside the scroll bar*/
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: @sub-color;
}
// Scroll bar style 2
.common-scrollbar::-webkit-scrollbar-thumb {
/*Small square inside the scroll bar*/
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: @border-color;
}
-----------Note: Since closing all and closing other functions simply clears the tagNav tag and has nothing to do with the route, the cleared page route leaving event cannot be obtained, so you can only close these two functions first------------ Add meta attributes to each route in the route.js file
{
path: 'auditManage',
name: 'auditManage',
meta:{title:'Audit Management'},
component: function (resolve) {
require(['../page/sysConfig/audit/auditManageMain.vue'], resolve);
},
redirect: '/main/auditManage/trendStatistics',
children: [{
path: 'trendStatistics',
name: 'trendStatistics',
meta:{title:'Trend Audit'},
component: function (resolve) {
require(['../page/sysConfig/audit/auditTrendStatisticsList.vue'], resolve);
}
}, {
path: 'search',
name: 'search',
meta:{title:'Audit Query'},
component: function (resolve) {
require(['../page/sysConfig/audit/auditSearchList.vue'], resolve);
}
},
------Description: This is the routing fragment containing the meta attribute mode content set, as well as the routing redirection ------- Write the tag adding/deleting and updating sessionStorage method in store's mutation.js
[setPageOpenedList](state,params = null){
// Read the locally saved open list data before setting state.pageOpenedList = sessionStorage.pageOpenedList
? JSON.parse(sessionStorage.pageOpenedList) : [{
title: 'Infrastructure',
name: 'basicDevice',
selected: true
}]
if (!params) {
return
}
if (params.index === -1) {
// Open a new page state.pageOpenedList.push({
title: params.route.meta.title,
name: params.route.name,
selected: false
})
params.index = state.pageOpenedList.length - 1
}
// Update selected value for (let i = 0; i < state.pageOpenedList.length; i++) {
if (params.index === i) {
state.pageOpenedList[i].selected = true
} else {
state.pageOpenedList[i].selected = false
}
}
// Update the local new open page list data sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)
},
// Remove PageOpenedList
[removePageOpenedList] (state, params = null) {
if (!params) {
return
}
if (typeof params.action === 'number') {
state.pageOpenedList.splice(params.action, 1)
} else {
//Enter here to delete all tabs and assign an initially selected tab
state.pageOpenedList = [{
title: 'Infrastructure',
name: 'basicDevice',
selected: true
}]
//If you delete others, add the tab under the current route
if (params.action === 'closeOthers' && params.route.name !== 'basicDevice') {
state.pageOpenedList[0].selected = false
state.pageOpenedList.push({
title: params.route.meta.title,
name: params.route.name,
selected: true
})
}
}
// Update the local new open page list data sessionStorage.pageOpenedList = JSON.stringify(state.pageOpenedList)
},
------Note: Because the store writing method is different in some projects, Add tag components, keep-alive components, and component selection/deletion methods in the main page main.vue, monitor route changes, and calculate the stored tag list
<div class="a-tag">
<tag-nav :pageOpenedList="pageOpenedList" ref="tagNavRef" @closeTags="closeTags"
@tagSelected="tagSelected"></tag-nav>
</div>
<div class="a-product">
<div class="loading" style="height:100%">
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>
</div>
</div>
// Navigation tag method closeTags (action,elId) {
let isRemoveSelected;
if (typeof action === 'number') { //Remove a single let elEvent = new Event('click');
document.getElementById(elId).dispatchEvent(elEvent);
//Remove the current tag by default regardless of whether it is the current tag for (let i = 0; i < this.$store.state.pageOpenedList.length; i++) {
if (action === i) {
this.$store.state.pageOpenedList[i].selected = true
} else {
this.$store.state.pageOpenedList[i].selected = false
}
}
//And it is the current tab isRemoveSelected = this.$store.state.pageOpenedList[action].selected
}
this.$store.commit('removePageOpenedList', { route: this.$route, action })
if (isRemoveSelected) {
// Remove a single tag and navigate to the page of the last tag this.$router.push({
name: this.$store.state.pageOpenedList[this.$store.state.pageOpenedList.length - 1].name
})
} else if (action === 'closeAll') {
this.$router.push('/main/basicDevice');
}
},
tagSelected (index) {
if (this.$store.state.pageOpenedList[index].name !== this.$route.name) {
this.$router.push({
name: this.$store.state.pageOpenedList[index].name
})
}
},
computed: {
pageOpenedList () {
return this.$store.getters.getPageOpenedList
},
},
watch:
$route (to) {
// Route changes, update PageOpenedList
let index = this.$util.indexOfCurrentPageOpened(to.name, this.$store.state.pageOpenedList)
this.$store.commit('setPageOpenedList', { route: to, index })
},
}
// Locate the newly opened page in pageOpenedList indexOfCurrentPageOpened(name, pageOpenedList) {
for (let index = 0; index < pageOpenedList.length; index++) {
if (pageOpenedList[index].name === name) {
return index
}
}
return -1
},
------Note: I will not post the component import here. The cache limit is 5 tags at most, for fear that opening too many tags will cause the browser memory to explode and freeze. ------- Write a mixins file: route leave callback, and mix it globally in main.js
/**
* For the history tab menu */
export default {
beforeRouteLeave(to, from, next) {
console.log("mixins-beforeRouteLeave:",from);
let flag = true
this.$store.state.pageOpenedList.forEach(e => { // pageOpenedList stores the component routing of the opened tabs if(from.name == e.name) {
flag = false
}
})
if(flag && this.$vnode.parent && this.$vnode.parent.componentInstance.cache) {
// let key = this.$vnode.key // Currently closed component name var key = (this.$vnode.key == null || this.$vnode.key == undefined) ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key;
let cache = this.$vnode.parent.componentInstance.cache // Cached component let keys = this.$vnode.parent.componentInstance.keys // Cached component name if (cache[key] != null) {
delete cache[key]
let index = keys.indexOf(key)
if(index > -1) {
keys.splice(index, 1)
}
}
}
next()
}
}
//Introduce the mixed method import beforeLeave from './mixins/beforeLeave' Vue.mixin(beforeLeave) ------Description: The main purpose here is to call back this exit method on each route page left, and determine whether the currently exited route is to switch to another tab menu or close the current menu tab. If it is closed, delete the corresponding cache--------- The left menu also needs to add a route listener so that the left menu can jump correctly and select the tag when switching the tag menu
handleSelect(index,indexPath){
this.active = index;
},
watch:{
$route (to) {
console.log("accordion=============",to,to.path);
//If the if statement indicates that the address is being redirected, use the redirect parent menu path to jump and let the parent page redirect itself if (to.matched && to.matched[to.matched.length-1].parent.redirect != undefined) {
this.handleSelect(to.matched[to.matched.length-1].parent.path,null);
}else {
this.handleSelect(to.path,null);
}
}
},
-----Description: The first method is triggered when el-menu selects a menu, and the matched attribute value is obtained when watching the route to judge------ If the switched label is a redirected routing menu, you need to get the title setting corresponding to the radio label of the label array when the redirected page is initialized (the redirection pages of my project are basically switched by radio). If it is cached after switching, you need to get the title from the route.
<div class="tabsBox">
<el-radio-group class="radioStyle" v-for="item in menus" :key="item.route" v-model="activeName" @change="checkItem(item.route)">
<el-radio-button :label="item.text" @blur.native="goPath(item.route)"></el-radio-button>
</el-radio-group>
</div>
data(){
return {
activeName:'Participant',
menus:[
{route:"partyManageReport",text:"Participants"},
{route:"staffManageReport",text:"Staff"},
{route:"partyAccountManageReport",text:"Main Account"},
{route:"partyAccountGroupManageReport",text:"Main Account Group"},
{route:"partySubAccountManageReport",text:"From account (web assets)"},
{route:"partySubAccountManageD",text:"From Account (Infrastructure)"}
]
}
},
watch:{
$route (to) {
this.activeName = to.meta.title;
}
},
created(){
this.$store.state.pageOpenedList.forEach((item)=>{
if(item.selected){
this.activeName = item.title;
}
})
}
Summary: Since a click event is added in the closing tag method, when closing other tags, set it as the current tag and close it, so that the route corresponding to the closed tag can be obtained to clear the cache through the leaving callback. But this will cause the currently selected tab to jump to the last tab after closing other tabs. If your requirements are not too high, this can be barely acceptable. But it doesn't feel that good. Is there a good way to close other tabs while clearing the corresponding cache of the currently selected tab without jumping to other tab options? I'm looking for optimization ideas. In addition, I don’t know how to clear the closed tab cache when closing all and other options. As mentioned above, I can’t get the method to trigger the route to leave when closing, but simply reset the tab array.
The first one is a basic tag, so the close button is removed. This is the end of this article about the sample code for implementing the history tab menu with vue+elementui+vuex+sessionStorage. For more relevant vue history tab menu content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Server concurrency estimation formula and calculation method
>>: Implementing the preview function of multiple image uploads based on HTML
Recommend
WeChat applet picker multi-column selector (mode = multiSelector)
Table of contents 1. Effect diagram (multiple col...
MySql grouping and randomly getting one piece of data from each group
Idea: Just sort randomly first and then group. 1....
Solution to the error when installing Docker on CentOS version
1. Version Information # cat /etc/system-release ...
Example of using Dockerfile to build an nginx image
Introduction to Dockerfile Docker can automatical...
Basic usage and examples of yum (recommended)
yum command Yum (full name Yellow dog Updater, Mo...
Realize super cool water light effect based on canvas
This article example shares with you the specific...
Detailed graphic explanation of installing MySQL database and configuring Java project on Linux
1. Install MySQL database ① Download and unzip an...
Example code for implementing a circular trajectory animation using CSS3 and table tags
html: In fact, it is to arrange several solid cir...
What to do if you forget your Linux/Mac MySQL password
What to do if you forget your Linux/Mac MySQL pas...
Running PostgreSQL in Docker and recommending several connection tools
1 Introduction PostgreSQL is a free software obje...
Solve the problem after adding --subnet to Docker network Create
After adding –subnet to Docker network Create, us...
How to set up automatic daily database backup in Linux
This article takes Centos7.6 system and Oracle11g...
Vue.js application performance optimization analysis + solution
Table of contents 1. Introduction 2. Why do we ne...
Vue+Bootstrap realizes a simple student management system
I used vue and bootstrap to make a relatively sim...
Common usage of hook in react
Table of contents 1. What is a hook? 2. Why does ...