1.效果展示
2.功能梳理
2.1 前言
我們在實現一個功能之前一定要先去梳理一下功能需求。
不要害怕設計功能會花費很多時間，前期只有把邏輯打通了，後面寫程式碼就會很容易。不然後麵就會一直修修補補，浪費大量時間。
做任何事情，都別急。慢慢來，反而比較快。
2.2 梳理功能需求
這裏我們用到的 vue 腳手架是 vite，vue 的版本是 3.2，前端元件庫是 Element plus。
我們要實現動態 Tab 標籤頁功能，肯定要用到 Element plus 的 el-tabs 元件。
el-tabs 的核心內容：
v-model 繫結的是當前啟用的 tab 的 name
closable 屬性表示可以關閉當前標籤頁
@tab-click tab 被選中時觸發的方法
@tab-remove 點選 tab 移除按鈕時觸發的方法
例如：
<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>
因為我們要實現的是動態 Tab，所以 el-tab-pane 肯定需要用 v-for 進行遍歷。
學會了 el-tabs 的用法，我們首先要把它放到一個位置，這個位置是通用的，並且在所有顯示內容的上面。
沒錯，就是在 router-view 的上面。
接下來我們就需要實現以下幾個功能：
1.初始化頁面，載入所有新增的 Tab，啟用當前 Tab。
2.點選左側選單欄，先判斷是否存在該 Tab，如果不存在就新增 Tab。其中 Tab 的 name 就是選單名，Tab 還要增加 path 屬性，因為點選 tab 要跳轉到相關的頁面。
3.新增 Tab 之後需要啟用 Tab。
4.點選 Tab，啟用 Tab ，並根據該 Tab 的 path 屬性跳轉頁面。
5.移除 Tab，隨機啟用剩下的某一個 Tab，並跳轉到啟用 Tab 對應的頁面。
6.sessionStorage 儲存所有的 Tab、啟用的 Tab。
3.功能實現
3.1 封裝 el-tabs
<!-- 動態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 點選左側選單，新增並激活 Tab
1.首先儲存啟用的選單
2.如果 Tab 名是首頁，就移除所有 Tab
3.判斷是否存在和選單名一樣的 Tab，不存在則新增。
4.啟用 Tab
// 點選左側選單
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，跳轉頁面
1.啟用 Tab ，儲存啟用的 Tab
2.跳轉頁面
// 點選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;
// 跳轉頁面，啟用左側選單
changeActiveRoute(selectTab.path);
}
};
因為跳轉頁面和啟用選單會經常用到，所以這裏寫了一個通用的方法
// 跳轉路由，啟用路由
const changeActiveRoute = (path) => {
activePath.value = path;
sessionStorage.setItem("activePath", path);
router.push(path);
};
3.5 移除 Tab
1.透過索引-1或者索引+1獲取下一個 Tab。
2.如果存在就啟用 Tab，儲存啟用的 Tab，跳轉頁面。
3.否則就跳轉到首頁
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，跳轉頁面
if (nextTab) {
activeName = nextTab.name;
changeActiveRoute(nextTab.path);
sessionStorage.setItem("activeTab", nextTab.name);
// 否則就跳轉到首頁
} else {
changeActiveRoute("/index");
}
}
});
}
// 啟用 tab
activeTab.value = activeName;
// 移除選擇的 Tab
allTabs.value = tabs.filter((tab) => tab.name !== targetName);
// 儲存所有的 tab
sessionStorage.setItem("allTabs", JSON.stringify(allTabs.value));
};
