image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: tab route close logic (#156)

Browse Source
This commit is contained in:
yuyang 2022-05-23 18:16:02 +08:00 committed by GitHub
parent 3a2d29df6c
commit f7e50cd10a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface.ts
View File

@ -50,6 +50,5 @@ export interface TRouterInfo {
export interface TTabRouterType {
isRefreshing: boolean;
homeRouter: TRouterInfo;
tabRouterList: Array<TRouterInfo>;
}

29
src/store/modules/tabs-router.ts
View File

@ -2,9 +2,18 @@ import { defineStore } from 'pinia';
import { TRouterInfo, TTabRouterType } from '@/interface';
import { store } from '@/store';
const homeRoute: Array<TRouterInfo> = [
{
path: '/dashboard/base',
routeIdx: 0,
title: '仪表盘',
name: 'DashboardBase',
isHome: true,
},
];
const state = {
homeRouter: { path: '/dashboard/base', routeIdx: 0, title: '仪表盘', name: 'DashboardBase', isHome: true },
tabRouterList: [],
tabRouterList: homeRoute,
isRefreshing: false,
};
@ -15,14 +24,16 @@ const ignoreCacheRoutes = [];
export const useTabsRouterStore = defineStore('tabsRouter', {
state: () => state,
getters: {
tabRouters: (state: TTabRouterType) => [state.homeRouter].concat(state.tabRouterList),
tabRouters: (state: TTabRouterType) => state.tabRouterList,
refreshing: (state: TTabRouterType) => state.isRefreshing,
},
actions: {
// 处理刷新
toggleTabRouterAlive(routeIdx: number) {
this.isRefreshing = !this.isRefreshing;
this.tabRouters[routeIdx].isAlive = !this.tabRouters[routeIdx].isAlive;
},
// 处理新增
appendTabRouterList(newRoute: TRouterInfo) {
const needAlive = !ignoreCacheRoutes.includes(newRoute.name);
if (!this.tabRouters.find((route: TRouterInfo) => route.path === newRoute.path)) {
@ -30,21 +41,25 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
this.tabRouterList = this.tabRouterList.concat({ ...newRoute, isAlive: needAlive });
}
},
// 处理关闭当前
subtractCurrentTabRouter(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(0, routeIdx - 1).concat(this.tabRouterList.slice(routeIdx));
this.tabRouterList = this.tabRouterList.slice(0, routeIdx).concat(this.tabRouterList.slice(routeIdx + 1));
},
// 处理关闭右侧
subtractTabRouterBehind(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(0, routeIdx);
this.tabRouterList = this.tabRouterList.slice(0, routeIdx + 1);
},
// 处理关闭左侧
subtractTabRouterAhead(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(routeIdx - 1);
this.tabRouterList = homeRoute.concat(this.tabRouterList.slice(routeIdx));
},
// 处理关闭其他
subtractTabRouterOther(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = [this.tabRouterList?.[routeIdx]];
this.tabRouterList = homeRoute.concat([this.tabRouterList?.[routeIdx]]);
},
removeTabRouterList() {
this.tabRouterList = [];