vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動的項(xiàng)目實(shí)踐
更新時(shí)間：2023年11月24日 10:22:54 作者：吃葡萄不吐葡萄皮嘻嘻
本文講述了如何使用Vue.js中的ElementUI組件庫實(shí)現(xiàn)el-menu與el-tabs的聯(lián)動,通過在el-menu中選擇菜單項(xiàng),可以切換el-tabs的內(nèi)容區(qū)域,具有一定的參考價(jià)值,感興趣的可以了解一下
效果圖如下：
當(dāng)標(biāo)簽欄很多的時(shí)候效果圖如下：
左側(cè)菜單布局 （$route.path高亮顯示激活路由 :default-active="$route.path"）
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#323744"
text-color="#fff"
active-text-color="#409eff"
:collapse="iscollapse"
unique-opened
:collapse-transition="false"
router
>
<template v-for="(item, index) in menuList">
<!-- 有下拉 -->
<el-submenu v-if="item.children" :index="item.id" :key="index">
<template slot="title">
<svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
<span>{{ item.title }}</span>
</template>
<el-menu-item-group
v-for="(item, index) in item.children"
:key="index"
>
<el-menu-item :index="item.path" @click="clickMenu(item)">
<template slot="title">
<svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
<span>{{ item.subtitle1 }}</span>
</template>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 沒有下拉 -->
<el-menu-item v-else :key="index" :index="item.path" @click="clickMenu(item)">
<svg-icon :className="item.icon" :iconClass="item.icon"></svg-icon>
<span slot="title">{{ item.subtitle1 }}</span>
</el-menu-item>
</template>
</el-menu>
模擬數(shù)據(jù)如下：（以下路徑均需在router/index.js里面進(jìn)行配置）
menuList: [
{
id: "9",
subtitle1: "首頁",
icon: "shangjiadianpu",
path: "/welcome",
},
{
id: "1",
title: "用戶管理",
icon: "huangguanyonghu",
children: [
{
id: "1-1",
subtitle1: "時(shí)間-moment",
icon: "huangguanyonghu",
path: "/user",
},
{
id: "1-2",
subtitle1: "刪除用戶",
icon: "huangguanyonghu",
img: require("@/assets/logo.png"),
path: "/user2",
},
{
id: "1-3",
subtitle1: "圖片放大",
icon: "huangguanyonghu",
path: "/user3",
},
],
},
{
id: "2",
title: "表格",
icon: "ershoujiaoyi",
children: [
{
id: "2-1",
subtitle1: "表格排序",
icon: "ershoujiaoyi",
path: "/tableSort",
},
{
id: "2-2",
subtitle1: "動畫",
icon: "ershoujiaoyi",
path: "/animation",
},
{
id: "2-3",
subtitle1: "權(quán)限3",
icon: "ershoujiaoyi",
path: "/limit3",
},
],
},
{
id: "6",
subtitle1: "拖拽-sortablejs",
icon: "shangpuchuzu",
path: "/sortable",
},
{
id: "7",
title: "功能",
icon: "ershoujiaoyi",
children: [
{
id: "7-1",
subtitle1: "上下滾動",
icon: "ershoujiaoyi",
path: "/numscroll",
},
{
id: "7-9",
subtitle1: "數(shù)字滾動",
icon: "ershoujiaoyi",
path: "/icountup",
},
{
id: "7-2",
subtitle1: "動畫",
icon: "ershoujiaoyi",
path: "/animation",
},
{
id: "7-3",
subtitle1: "調(diào)用攝像頭",
icon: "ershoujiaoyi",
path: "/opencamera",
},
{
id: "7-4",
subtitle1: "裁剪圖片",
icon: "ershoujiaoyi",
path: "/cropperjs",
},
{
id: "7-5",
subtitle1: "裁剪圖片2",
icon: "ershoujiaoyi",
path: "/vuecropper",
},
{
id: "7-6",
subtitle1: "打印功能",
icon: "ershoujiaoyi",
path: "/printjs",
},
{
id: "7-7",
subtitle1: "vue-pfd預(yù)覽",
icon: "ershoujiaoyi",
path: "/vuepdf",
},
{
id: "7-8",
subtitle1: "內(nèi)嵌iframe",
icon: "ershoujiaoyi",
path: "/iframepdf",
},
{
id: "7-10",
subtitle1: "放大鏡功能",
icon: "ershoujiaoyi",
path: "/magnifier",
},
{
id: "7-11",
subtitle1: "多表頭表格",
icon: "ershoujiaoyi",
path: "/xlsx",
},
{
id: "7-12",
subtitle1: "單表頭表格",
icon: "ershoujiaoyi",
path: "/xlsx2",
},
{
id: "7-13",
subtitle1: "Vuecontextmenu",
icon: "ershoujiaoyi",
path: "/vuecontextmenu",
},
{
id: "7-14",
subtitle1: "vcontextmenu",
icon: "ershoujiaoyi",
path: "/vcontextmenu",
},
{
id: "7-15",
subtitle1: "表格合并",
icon: "ershoujiaoyi",
path: "/tablehebing",
},
{
id: "7-16",
subtitle1: "日期選擇",
icon: "ershoujiaoyi",
path: "/datepicker",
},
{
id: "7-17",
subtitle1: "treeselect",
icon: "ershoujiaoyi",
path: "/treeselect",
},
{
id: "7-19",
subtitle1: "大屏數(shù)據(jù)",
icon: "ershoujiaoyi",
path: "/datav",
},
{
id: "7-20",
subtitle1: "左右菜單聯(lián)動",
icon: "ershoujiaoyi",
path:'/leftrightmenu'
},
{
id: "7-18",
subtitle1: "測試頁面",
icon: "ershoujiaoyi",
path: "/test",
},
],
},
],
主要內(nèi)容區(qū)域標(biāo)簽欄布局如下：
<el-tabs class="vab-tabs-content" v-model="activeIndex" type="card" @tab-click="clickTab" @tab-remove="removeTab" > <el-tab-pane v-for="item of openTab" v-if="openTab.length" :key="item.name" :label="item.name" :name="item.route" :closable="isNoClosable(item)" > </el-tab-pane> </el-tabs>
標(biāo)簽欄樣式
/deep/.el-tabs__header .el-tabs__nav{
border:none;
}
/deep/.el-tabs--card>.el-tabs__header{
border:none;
}
/deep/.el-tabs__header .el-tabs__item{
padding:0 30px;
border:none
}
/deep/.el-tabs__header .el-tabs__item.is-active {
color: #1890ff;
background: #e8f4ff;
outline: none;
-webkit-mask: url(~@/assets/images/tabs-bg.png);
mask: url(~@/assets/images/tabs-bg.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/deep/.el-tabs__header .el-tabs__item:hover {
color: #515a6e;
background: #dee1e6;
-webkit-mask: url(~@/assets/images/tabs-bg.png);
mask: url(~@/assets/images/tabs-bg.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
padding-left: 30px;
padding-right: 30px;
}
/deep/.el-tabs__header .el-tabs__item.is-active.is-closable {
padding-left: 30px;
padding-right: 30px;
}
/deep/.el-tabs__header .el-tabs__item.is-active:hover {
color: #1890ff !important;
background: #e8f4ff !important;
// padding: 0 30px 0 30px;
}
.el-tabs__header .el-tabs__item.is-active:hover {
color: #1890ff;
background: #e8f4ff;
-webkit-mask: url(~@/assets/images/tabs-bg.png);
mask: url(~@/assets/images/tabs-bg.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
創(chuàng)建一個倉庫模塊 @/store/Modules/tabs.js
tabs.js代碼如下
export default{
namespaced: true, //開啟命名空間
state: {
openTab: JSON.parse(sessionStorage.getItem('openTab'))|| [],
activeIndex: ''
},
mutations: {
add_tabs (state, data) {
//如果等于-1說明tabs不存在那么插入，否則什么都不做
//findindex找角標(biāo)，循環(huán)判斷一下，如果等于那么就代表有相同的，就不必添加，如果找不到那就是-1.就添加
let result = state.openTab.findIndex(item => item.name === data.name);
result === -1 ? state.openTab.push(data) : '';
// 存到本地 頁面刷新不丟失
sessionStorage.setItem('openTab',JSON.stringify(state.openTab))
},
delete_tabs (state, route) {
let index = 0
for (let gohh of state.openTab) {
if (gohh.route === route) {
break
}
index++
}
state.openTab.splice(index, 1)
// 存到本地 頁面刷新不丟失
sessionStorage.setItem('openTab',JSON.stringify(state.openTab))
},
set_active_index (state, index) {
console.log(index);
state.activeIndex = index
}
}
}
將tab.js模塊引入@store/index.js
import Vue from 'vue'
import Vuex from 'vuex
import tabs from './Modules/tabs'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
tabs
}
})
主要邏輯代碼如下：
在主要內(nèi)容區(qū)域引入如下代碼獲取tabs.js倉庫里面的值在頁面進(jìn)行渲染
computed: {
openTab () {
return this.$store.state.tabs.openTab
},
activeIndex: {
get () {
return this.$store.state.tabs.activeIndex
},
set (val) {
this.$store.commit('tabs/set_active_index', val)
}
}
},
給左側(cè)菜單導(dǎo)航綁定點(diǎn)擊事件clickMenu，去觸發(fā)倉庫的add_tabs事件，把數(shù)組添加到openTab數(shù)組里面（添加前需要判斷openTab是否有當(dāng)前值，有就不添加，反之添加），把a(bǔ)ctiveIndex也改變
clickMenu(val){
//備注 ：分模塊觸發(fā)事件可參考vue官網(wǎng) '模塊名/事件名'
this.$store.commit('tabs/add_tabs',{route: val.path , name: val.subtitle1 })
this.$store.commit('tabs/set_active_index', val.path)
},
給標(biāo)簽綁定點(diǎn)擊事件clickTab 跳轉(zhuǎn)到對應(yīng)路由，給標(biāo)簽叉叉綁定removeTab (tab-remove 點(diǎn)擊 tab 移除按鈕后觸發(fā) 被刪除的標(biāo)簽的 name)拿到對應(yīng)的路由進(jìn)行判斷
1、如果是首頁則不刪除；
2、如果刪除的高亮激活這一項(xiàng)，則跳轉(zhuǎn)到最后openTab數(shù)組的最后一項(xiàng)并高亮；
3、如果刪除的不是高亮激活這一項(xiàng)，則不跳轉(zhuǎn)，高亮激活項(xiàng)不變。
clickTab (tab) {
console.log(tab);
this.$router.push({path: this.activeIndex})
},
removeTab (target) {
if(target == '/'||target == '/welcome'){
return
}
this.$store.commit('tabs/delete_tabs', target)
if (this.activeIndex === target) {
// 設(shè)置當(dāng)前激活的路由
if (this.openTab && this.openTab.length >= 1) {
console.log('=============', this.openTab[this.openTab.length - 1].route)
this.$store.commit('tabs/set_active_index', this.openTab[this.openTab.length - 1].route)
this.$router.push({path: this.activeIndex})
}
}
},
給el-tab-pane標(biāo)簽綁定屬性 :closable="isNoClosable(item)判斷el-tab-pane是否顯示叉叉，除了首頁不顯示，其他均顯示
isNoClosable(item){
return item.route !== '/welcome'
},
刷新時(shí)以當(dāng)前路由做為tab加入tabs，當(dāng)前路由不是首頁時(shí)，添加首頁以及另一頁到store里，并設(shè)置激活狀態(tài)，當(dāng)前路由是首頁時(shí)，添加首頁到store，并設(shè)置激活狀態(tài)（注意：this.$route.meta.title的title值要和菜單數(shù)據(jù)里面的subtitle1名稱保持一致！?。。?/p>
mounted () {
console.log(this.$route);
// 刷新時(shí)以當(dāng)前路由做為tab加入tabs
// 當(dāng)前路由不是首頁時(shí)，添加首頁以及另一頁面到store里，并設(shè)置激活狀態(tài)
// 當(dāng)前路由是首頁時(shí)，添加首頁到store，并設(shè)置激活狀態(tài)
if (this.$route.path !== '/welcome') {
this.$store.commit('tabs/add_tabs', {route: '/welcome' , name: '首頁'})
this.$store.commit('tabs/add_tabs', {route: this.$route.path , name: this.$route.meta.title })
this.$store.commit('tabs/set_active_index', this.$route.path)
} else {
this.$store.commit('tabs/add_tabs', {route: '/welcome', name: '首頁'})
this.$store.commit('tabs/set_active_index', '/welcome')
}
}
實(shí)現(xiàn)思路大致就是這樣，主要自己項(xiàng)目的數(shù)據(jù)稍作修改。
到此這篇關(guān)于vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)vue el-menu與el-tabs聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
- Vue3 Element-plus el-menu無限級菜單組件封裝過程
- vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動的示例代碼
- Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的完整步驟
- Vue?el-menu?左側(cè)菜單導(dǎo)航功能的實(shí)現(xiàn)
- vue+el-menu實(shí)現(xiàn)菜單欄無限多層級分類
- vue2+el-menu實(shí)現(xiàn)路由跳轉(zhuǎn)及當(dāng)前項(xiàng)的設(shè)置方法實(shí)例
- vue使用elementui的el-menu的折疊菜單collapse示例詳解
相關(guān)文章
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vue中h函數(shù)和render函數(shù)的區(qū)別淺析
這篇文章主要介紹了Vue中h函數(shù)和render函數(shù)的區(qū)別的相關(guān)資料,h函數(shù)是工具,負(fù)責(zé)創(chuàng)建節(jié)點(diǎn), render函數(shù)是過程,負(fù)責(zé)組織節(jié)點(diǎn)并生成最終的虛擬DOM,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
這篇文章主要為大家介紹了Vue編譯報(bào)錯內(nèi)存溢出問題解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue使用axios進(jìn)行g(shù)et請求拼接參數(shù)的2種方式詳解
axios中post請求都是要求攜帶參數(shù)進(jìn)行請求,這篇文章主要給大家介紹了關(guān)于Vue使用axios進(jìn)行g(shù)et請求拼接參數(shù)的2種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue代理請求之Request?failed?with?status?code?404問題及解決
這篇文章主要介紹了vue代理請求之Request?failed?with?status?code?404問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue路由自動添加#的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10![vue3清空let arr=reactive([])的方式](http://img.jbzj.com/images/xgimg/bcimg8.png)
這篇文章主要介紹了vue3清空let arr=reactive([])的方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
vue如何使用mapbox對當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10