elementplus利用tabs标签页,实现自定义动态增减标签页功能
标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单。
·
标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单。
思路:
① 先定义好tabs的绑定值(activeTab),标签页数据(tabList)
② 利用onBeforeRouteUpdate方法,可以实现在当前组件中获取其他组件中的路由变化信息,例如你在菜单组件中点击二级菜单,那么在标签页组件中可以通过onBeforeRouteUpdate拿到对应的路由数据。定义添加标签导航addTab方法,查找tabList是否包含你点击的路由信息,如果没有则放入tabList中,并修改activeTab。
③ 页面刷新后会失去点击后的记录,因此可以使用vueuse中的cookie,初始化标签页数据(initTabList)
④ 删除标签页(removeTab ),重要的是删除当前标签页可以直接切换至下一个或上一个标签页:
1、首先就需要判断你当前点击的标签页路径是不是和activeTab路径一致(确认关闭的是否是当前标签页);
2、其次遍历tabList,拿到他每一个数据和索引,再次判断要删除的路径(currentTab)是否和tabList(tab.path)匹配,获取要删除的tabs的下一条(tabs[index + 1])或者上一条,如果存在那么赋值给activeTab;
3、最后重新赋值activeTab,过滤删除后的tabList,再设置cookie就可以了。
<template>
<el-tabs
v-model="activeTab"
type="card"
class="flex-1"
@tab-change="tabChange"
@tab-remove="removeTab"
style="min-width: 100px"
>
<el-tab-pane
v-for="item in tabList"
:key="item.path"
:label="item.title"
:name="item.path"
:closable="item.path != '/'"
></el-tab-pane>
</el-tabs>
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useCookies } from "@vueuse/integrations/useCookies";
const route = useRoute();
const router = useRouter();
const cookie = useCookies();
const activeTab = ref(route.path);
const tabList = ref([
{
title: "后台首页",
path: "/",
},
]);
//点击标签跳转指定路由
function tabChange(path) {
router.push(path);
activeTab.value = path;
}
//添加标签导航
function addTab(tab) {
const notTab = tabList.value.findIndex((e) => e.path == tab.path) == -1;
if (notTab) {
tabList.value.push(tab);
}
cookie.set("tabList", tabList.value);
}
//初始化tabList
function initTabList() {
const data = cookie.get("tabList");
if (data) {
tabList.value = data;
}
}
initTabList();
//获取路由跳转后的tab数据
onBeforeRouteUpdate((p) => {
activeTab.value = p.path;
addTab({
title: p.meta.title,
path: p.path,
});
});
//删除tab
const removeTab = (currentTab) => {
let tabs = tabList.value;
let a = activeTab.value;
//如果当前路径和你要删除的路径一致
if (currentTab == a) {
tabs.forEach((tab, index) => {
//要删除的路径和tabList的路径匹配
if (tab.path == currentTab) {
const nextTab = tabs[index + 1] || tabs[index - 1];
//如果存在,获取nextTab路径
if (nextTab) {
a = nextTab.path;
}
}
});
}
//重新赋值activeTab
activeTab.value = a;
//过滤删除后的tabList
tabList.value = tabList.value.filter((tab) => tab.path != currentTab);
//设置cookie
cookie.set("tabList", tabList.value);
};
</script>
更多推荐
所有评论(0)