elementui实现标签页与菜单栏联动的示例代码
更新时间:2024年06月25日 09:43:57 作者:前端小白小白白
多级联动是一种常见的交互方式,本文主要介绍了elementui实现标签页与菜单栏联动的示例代码,具有一定的参考价值,感兴趣的可以了解一下
技术:vue2+vuex+elementui
store/index.js文件里
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
tabList:[]
},
mutations: {
addTab: (state, tab) => {
// 如果tab已经存在,不添加新的tabs
if (state.tabList.some(item => item.path === tab.path)) return
state.tabList.push(tab)
}
},
getters: {
// 获取tbsList
getTabs: (state) => {
return state.tabList
}
},
actions: {
},
modules: {
}
})
功能点:
1:当前活跃的tab就是当前路由的path
2: 页面刷新,tabList数据丢失,则在刷新之前使用sessionStorage进行存储
3:删除tab的时候,活跃的tab变为被删除的前一个或者下一个,删除后重新设置活跃的tab 和tabList
4:监控路由变化,路由变化了,活跃的tab 和tabList 也要随之变化
<template>
<el-tabs
v-model="activeTab"
closable
@tab-remove="removeTab"
@tab-click="clickBtn"
>
<el-tab-pane
:key="index"
v-for="(item, index) in tabList"
:label="item.title"
:name="item.path"
>
{{ item.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
import store from '../../store'
export default {
name: '',
data() {
return {
// 当前活跃的tabs
activeTab: '',
}
},
components: {},
computed: {
tabList() {
return store.getters['getTabs']
},
},
watch: {
$route: function () {
this.setActiveTab()
this.addTab()
},
},
created() {},
mounted() {
this.beforeRefresh()
this.setActiveTab()
this.addTab()
},
methods: {
// 设置活跃的tab
setActiveTab() {
this.activeTab = this.$route.path
},
// 添加tab
addTab() {
const { path, meta } = this.$route
const tab = {
path,
title: meta.title,
}
store.commit('addTab', tab)
},
// 点击tab
clickBtn(tab) {
const { name } = tab
this.$router.push({ path: name })
},
// 删除tab
removeTab(target) {
// 当前激活的tab
let active = this.activeTab
const tabs = this.tabList
// 只有一个标签页的时候不允许删除
if (tabs.length === 1) return
if (active === target) {
tabs.forEach((tab, index) => {
// 如果删除的就是当前活跃的tab,就把活跃的tab变成上一个或下一个
const nextTab = tab[index + 1] || tab[index - 1]
if (nextTab) {
active = nextTab.path
}
})
}
// 重新设置当前激活的选项卡和 选项卡列表
this.activeTab = active
store.state.tabList = tabs.filter((tab) => tab.path !== target)
},
// 解决刷新数据丢失问题
beforeRefresh() {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('tabsView', JSON.stringify(this.tabList))
})
let tabSession = sessionStorage.getItem('tabsView')
if (tabSession) {
let oldTabs = JSON.parse(tabSession)
if (oldTabs.length > 0) {
store.state.tabList = oldTabs
}
}
},
},
}
</script>
补充:路由
{
path: '/layout',
component: () => import('../layout/index.vue'),
children: [
{
path: 'lay1',
component: () => import('../views/lay/Lay1.vue'),
meta: {
title:'选项1'
}
},
{
path: 'lay2',
component: () => import('../views/lay/Lay2.vue'),
meta: {
title:'选项2'
}
},
{
path: 'lay3',
component: () => import('../views/lay/Lay3.vue'),
meta: {
title:'选项3'
}
},
{
path: 'lay4',
component: () => import('../views/lay/Lay4.vue'),
meta: {
title:'选项4'
}
},
}
到此这篇关于elementui实现标签页与菜单栏联动的示例代码的文章就介绍到这了,更多相关element 标签页与菜单栏联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
-
这篇文章主要介绍了Vue中watch与watchEffect的区别详细解读,watch函数与watchEffect函数都是监听器,在写法和用法上有一定区别,是同一功能的两种不同形态,底层都是一样的,需要的朋友可以参考下2023-11-11
-
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容,文中运用大量的图片进行讲解,感兴趣的小伙伴可以看一看这篇文章2021-08-08
-
项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,那么在 vue 中 我们如何处理这类的效果呢?下面我们就一起来了解一下2021-05-05
-
今天小编就为大家分享一篇用vue-cli开发vue时的代理设置方法,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
-
这篇文章主要为大家详细介绍了vue图片上传组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-12-12
-
这篇文章主要为大家详细介绍了Vue实现移动端拖拽交换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2020-07-07
-
这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
-
这篇文章主要介绍了vue2.0 资源文件assets和static的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04
-
本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件),具有一定的参考价值,有兴趣的可以了解一下2017-07-07
-
本篇文章主要介绍了关于vue.js v-bind 的一些理解和思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论