基于vue實現(xiàn)動態(tài)Tab標簽頁功能
1.效果展示
2.功能梳理
2.1 前言
我們在實現(xiàn)一個功能之前一定要先去梳理一下功能需求。
不要害怕設(shè)計功能會花費很多時間，前期只有把邏輯打通了，后面寫代碼就會很容易。不然后面就會一直修修補補，浪費大量時間。
做任何事情，都別急。慢慢來，反而比較快。
2.2 梳理功能需求
這里我們用到的 vue 腳手架是 vite，vue 的版本是 3.2，前端組件庫是 Element plus。
我們要實現(xiàn)動態(tài) Tab 標簽頁功能，肯定要用到 Element plus 的 el-tabs 組件。
el-tabs 的核心內(nèi)容：
- v-model 綁定的是當前激活的 tab 的 name
- closable 屬性表示可以關(guān)閉當前標簽頁
- @tab-click tab 被選中時觸發(fā)的方法
- @tab-remove 點擊 tab 移除按鈕時觸發(fā)的方法
例如：
<el-tabs
v-model="activeName"
type="card"
closable
@tab-click="handleClick"
@tab-remove ="handleRemove"
>
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
因為我們要實現(xiàn)的是動態(tài) Tab，所以 el-tab-pane 肯定需要用 v-for 進行遍歷。
學會了 el-tabs 的用法，我們首先要把它放到一個位置，這個位置是通用的，并且在所有顯示內(nèi)容的上面。
沒錯，就是在 router-view 的上面。
接下來我們就需要實現(xiàn)以下幾個功能：
1.初始化頁面，加載所有新增的 Tab，激活當前 Tab。
2.點擊左側(cè)菜單欄，先判斷是否存在該 Tab，如果不存在就新增 Tab。其中 Tab 的 name 就是菜單名，Tab 還要增加 path 屬性，因為點擊 tab 要跳轉(zhuǎn)到相關(guān)的頁面。
3.新增 Tab 之后需要激活 Tab。
4.點擊 Tab，激活 Tab ，并根據(jù)該 Tab 的 path 屬性跳轉(zhuǎn)頁面。
5.移除 Tab，隨機激活剩下的某一個 Tab，并跳轉(zhuǎn)到激活 Tab 對應(yīng)的頁面。
6.sessionStorage 存儲所有的 Tab、激活的 Tab。
3.功能實現(xiàn)
3.1 封裝 el-tabs
<!-- 動態(tài)tab標簽頁 -->
<el-tabs
v-if="allTabs.length > 0"
v-model="activeTab"
type="card"
closable
@tab-click="clickTab"
@tab-remove="removeTab"
>
<el-tab-pane
v-for="item in allTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
3.2 初始化頁面操作
定義2個變量: 當前所有操作的 Tab 和激活的 Tab.
// 當前激活的tab
let activeTab = ref("");
// 所有tab
let allTabs = ref([]);
加載所有 Tab 和激活的 Tab
// 掛載 DOM 之前
onBeforeMount(() => {
// 當前激活的菜單
activePath.value = sessionStorage.getItem("activePath")
? sessionStorage.getItem("activePath")
: "/index";
// 所有tab
allTabs.value = JSON.parse(sessionStorage.getItem("allTabs")) || [];
// 激活的tab
activeTab.value = sessionStorage.getItem("activeTab") || "";
});
3.3 點擊左側(cè)菜單，新增并激活 Tab
1.首先存儲激活的菜單
2.如果 Tab 名是首頁，就移除所有 Tab
3.判斷是否存在和菜單名一樣的 Tab，不存在則添加。
4.激活 Tab
// 點擊左側(cè)菜單
const saveActiveNav = (path, tab) => {
// 當前激活的菜單
activePath.value = path;
sessionStorage.setItem("activePath", path);
// 如果是首頁，就移除所有的 Tab
if (tab.name === "首頁") {
allTabs.value = [];
sessionStorage.removeItem("allTabs");
sessionStorage.removeItem("activeTab");
} else {
let index = allTabs.value.findIndex((item) => item.name === tab.name);
// 如果不存在
if (index === -1) {
// 添加到tabs中
allTabs.value.push(Object.assign(tab, { path: path }));
sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
sessionStorage.setItem("activeTab", tab.name);
}
// 當前激活的tab
activeTab.value = tab.name;
}
};
3.4 點擊 Tab，跳轉(zhuǎn)頁面
1.激活 Tab ，存儲激活的 Tab
2.跳轉(zhuǎn)頁面
// 點擊tab
const clickTab = (tab) => {
let tabName = tab.paneName;
// 存儲激活的 Tab
sessionStorage.setItem("activeTab", tabName);
let selectTab = allTabs.value.find((tab) => tab.name === tabName);
if (selectTab !== undefined) {
// 激活 Tab
activeTab.value = selectTab.name;
// 跳轉(zhuǎn)頁面，激活左側(cè)菜單
changeActiveRoute(selectTab.path);
}
};
因為跳轉(zhuǎn)頁面和激活菜單會經(jīng)常用到，所以這里寫了一個通用的方法
// 跳轉(zhuǎn)路由，激活路由
const changeActiveRoute = (path) => {
activePath.value = path;
sessionStorage.setItem("activePath", path);
router.push(path);
};
3.5 移除 Tab
1.通過索引-1或者索引+1獲取下一個 Tab。
2.如果存在就激活 Tab，存儲激活的 Tab，跳轉(zhuǎn)頁面。
3.否則就跳轉(zhuǎn)到首頁
4.激活 tab，移除點擊的 Tab，存儲所有的 Tab
// 移除tab。targetName 要移除的tab
const removeTab = (targetName) => {
let tabs = allTabs.value;
// activeName 當前激活的tab
let activeName = activeTab.value;
if (activeTab.value === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
// 下一個 tab：索引-1或者索引+1
const nextTab = tabs[index + 1] || tabs[index - 1];
// 如果存在就激活 Tab，存儲激活的 Tab，跳轉(zhuǎn)頁面
if (nextTab) {
activeName = nextTab.name;
changeActiveRoute(nextTab.path);
sessionStorage.setItem("activeTab", nextTab.name);
// 否則就跳轉(zhuǎn)到首頁
} else {
changeActiveRoute("/index");
}
}
});
}
// 激活 tab
activeTab.value = activeName;
// 移除選擇的 Tab
allTabs.value = tabs.filter((tab) => tab.name !== targetName);
// 存儲所有的 tab
sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
};
到此這篇關(guān)于基于vue實現(xiàn)動態(tài)Tab標簽頁功能的文章就介紹到這了,更多相關(guān)vue動態(tài)Tab標簽頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)可移動水平時間軸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
ElementPlus?Table表格實現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實現(xiàn)可編輯單元格,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項目,這篇文章主要給大家介紹了關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 對象添加或刪除成員時無法實時更新的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
本文主要介紹了修改Vue項目運行的IP和端口，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
ant design vue嵌套表格及表格內(nèi)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue綁定內(nèi)聯(lián)樣式的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3組合式API實現(xiàn)todo列表,下面用組合式?API的寫法,實現(xiàn)一個可新增、刪除的todo列表效果,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue如何在表格中實現(xiàn)右鍵菜單問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
本文主要介紹了使用ElementUI寫一個前端分頁查詢的實例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02