BCVP.VUE3系列第九课：实现tabs标签栏

template> div class="tabs-box"> div class="tabs-menu"> el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove"> el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path" :closable="item.close"> template #label> el-icon v-show="item.icon && tabsIcon" class="tabs-icon"> component :is="item.icon">component> el-icon> {{ item.title }} template> el-tab-pane> el-tabs> MoreButton /> div> div>template>
script setup lang="ts">import { ref, computed, watch, onMounted } from "vue";import { useRoute, useRouter } from "vue-router";import { useGlobalStore } from "@/stores/modules/global";import { useTabsStore } from "@/stores/modules/tabs";import { useAuthMenuStore } from "@/stores/modules/authMenu";import { useKeepAliveStore } from "@/stores/modules/keepAlive";import type { TabsPaneContext, TabPaneName } from "element-plus";import MoreButton from "./components/MoreButton.vue";import type { TabsMenuProps } from "@/stores/interface";
const route = useRoute();const router = useRouter();const tabStore = useTabsStore();const authStore = useAuthMenuStore();const globalStore = useGlobalStore();const keepAliveStore = useKeepAliveStore();
const tabsMenuValue = ref(route.fullPath);const tabsMenuList = computed(() => tabStore.tabsMenuList);const tabsIcon = computed(() => globalStore.tabsIcon);
onMounted(() => { // initTabs();});
// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）watch( () => route.fullPath, () => { if (route.meta.isFull) return; tabsMenuValue.value = route.fullPath; const tabsParams = { icon: route.meta.icon as string, title: route.meta.title as string, path: route.fullPath, name: route.name as string, close: route.path != '/' }; tabStore.addTabs(tabsParams); route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.name as string); }, { immediate: true });
// 初始化需要固定的 tabsconst initTabs = () => { authStore.flatMenuListGet.forEach(item => { if (!item.IsButton) { const tabsParams = { icon: item.meta.icon, title: item.meta.title, path: item.path, name: item.name, close: route.path != '/' // 可以固定某些路由不被删除 }; tabStore.addTabs(tabsParams as TabsMenuProps); } });};
// Tab Clickconst tabClick = (tabItem: TabsPaneContext) => { const fullPath = tabItem.props.name as string; router.push(fullPath);};
// Remove Tabconst tabRemove = (fullPath: TabPaneName) => { const name = tabStore.tabsMenuList.filter(item => item.path == fullPath)[0].name || ""; keepAliveStore.removeKeepAliveName(name); tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);};script>
style scoped lang="scss">@import "./index.scss";style>

可以看到，核心逻辑就是有一个watch监听，将数据给放到状态管理器Pinia中。

然后再来个更多操作的按钮组件，将标签的增删改查操作同样在Pinia中处理：

新建srclayoutscomponentsTabscomponentsMoreButton.vue，

template> el-dropdown trigger="click" :teleported="false"> div class="more-button"> i :class="'iconfont icon-xiala'">i> div> template #dropdown> el-dropdown-menu> el-dropdown-item @click="refresh"> el-icon> Refresh /> el-icon>刷新 el-dropdown-item> el-dropdown-item @click="maximize"> el-icon> FullScreen /> el-icon>最大化 el-dropdown-item> el-dropdown-item divided @click="closeCurrentTab"> el-icon> Remove /> el-icon>关闭当前 el-dropdown-item> el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')"> el-icon> DArrowLeft /> el-icon>关闭左侧 el-dropdown-item> el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')"> el-icon> DArrowRight /> el-icon>关闭右侧 el-dropdown-item> el-dropdown-item @click="closeOtherTab"> el-icon> CircleClose /> el-icon>关闭其它 el-dropdown-item> el-dropdown-item @click="closeAllTab"> el-icon> FolderDelete /> el-icon>关闭所有 el-dropdown-item> el-dropdown-menu> template> el-dropdown>template>
script setup lang="ts">import { inject, nextTick } from "vue";import { useTabsStore } from "@/stores/modules/tabs";import { useGlobalStore } from "@/stores/modules/global";import { useKeepAliveStore } from "@/stores/modules/keepAlive";import { useRoute, useRouter } from "vue-router";
const route = useRoute();const router = useRouter();const tabStore = useTabsStore();const globalStore = useGlobalStore();const keepAliveStore = useKeepAliveStore();
// refresh current pageconst refreshCurrentPage: Function = inject("refresh") as Function;const refresh = () => { setTimeout(() => { keepAliveStore.removeKeepAliveName(route.name as string); refreshCurrentPage(false); nextTick(() => { keepAliveStore.addKeepAliveName(route.name as string); refreshCurrentPage(true); }); }, 0);};
// maximize current pageconst maximize = () => { globalStore.setGlobalState("maximize", true);};
// Close Currentconst closeCurrentTab = () => { if (route.path == '/') return; tabStore.removeTabs(route.fullPath); keepAliveStore.removeKeepAliveName(route.name as string);};
// Close Otherconst closeOtherTab = () => { tabStore.closeMultipleTab(route.fullPath);};
// Close Allconst closeAllTab = () => { tabStore.closeMultipleTab(); router.push('/');};script>

import { createPinia } from "pinia";import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// pinia persistconst pinia = createPinia();pinia.use(piniaPluginPersistedstate);
export default pinia;

import type { PersistedStateOptions } from "pinia-plugin-persistedstate";
/** * @description pinia 持久化参数配置 * @param {String} key 存储到持久化的 name * @param {Array} paths 需要持久化的 state name * @return persist * */const piniaPersistConfig = (key: string, paths?: string[]) => { const persist: PersistedStateOptions = { key, storage: localStorage, // storage: sessionStorage, paths }; return persist;};
export default piniaPersistConfig;

import router from "@/router";import { defineStore } from "pinia";import piniaPersistConfig from "@/stores/config/piniaPersist";
export const useTabsStore = defineStore({ id: "blogvue3-tabs", state: (): TabsState => ({ tabsMenuList: [] }), actions: { // Add Tabs // .... 更多逻辑 }, persist: piniaPersistConfig("blogvue3-tabs")});