基于vue实现动态Tab标签页功能
作者：知否技术
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));
};
到此这篇关于基于vue实现动态Tab标签页功能的文章就介绍到这了,更多相关vue动态Tab标签页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！