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

feat: multiple tabs support action (#297)

Browse Source 
* feat: multiple tabs support action

* refactor: tap change to tab

* feat(tab-router): handle operation effect

Co-authored-by: Uyarn <uyarnchen@gmail.com>
This commit is contained in:
paopao 2022-09-14 12:27:02 +08:00 committed by GitHub
parent fc69c8f9eb
commit 12e869ddeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/layouts/components/LayoutContent.vue
View File

@ -19,19 +19,23 @@
<t-dropdown
trigger="context-menu"
:min-column-width="128"
:popup-props="{ overlayClassName: 'route-tabs-dropdown' }"
:popup-props="{
overlayClassName: 'route-tabs-dropdown',
onVisibleChange: (visible: boolean, ctx) => handleTabMenuClick(visible, ctx, routeItem.path),
visible: activeTabPath === routeItem.path,
}"
>
<template v-if="!routeItem.isHome">
{{ routeItem.title }}
</template>
<t-icon v-else name="home" />
<template #dropdown>
<t-dropdown-menu v-if="$route.path === routeItem.path">
<t-dropdown-menu>
<t-dropdown-item @click="() => handleRefresh(routeItem, index)">
<t-icon name="refresh" />
刷新
</t-dropdown-item>
<t-dropdown-item v-if="index > 0" @click="() => handleCloseAhead(routeItem.path, index)">
<t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
<t-icon name="arrow-left" />
关闭左侧
</t-dropdown-item>
@ -42,7 +46,7 @@
<t-icon name="arrow-right" />
关闭右侧
</t-dropdown-item>
<t-dropdown-item @click="() => handleCloseOther(routeItem.path, index)">
<t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
<t-icon name="close-circle" />
关闭其它
</t-dropdown-item>
@ -63,7 +67,7 @@
</template>
<script setup lang="ts">
import { nextTick, computed } from 'vue';
import { nextTick, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useSettingStore, useTabsRouterStore } from '@/store';
import { prefix } from '@/config/global';
@ -79,6 +83,7 @@ const router = useRouter();
const settingStore = useSettingStore();
const tabsRouterStore = useTabsRouterStore();
const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
const activeTabPath = ref('');
const handleChangeCurrentTab = (path: string) => {
const { tabRouters } = tabsRouterStore;
@ -100,14 +105,46 @@ const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
tabsRouterStore.toggleTabRouterAlive(routeIdx);
router.replace({ path: route.path, query: route.query });
});
activeTabPath.value = null;
};
const handleCloseAhead = (path: string, routeIdx: number) => {
tabsRouterStore.subtractTabRouterAhead({ path, routeIdx });
handleOperationEffect('ahead', routeIdx);
};
const handleCloseBehind = (path: string, routeIdx: number) => {
tabsRouterStore.subtractTabRouterBehind({ path, routeIdx });
handleOperationEffect('behind', routeIdx);
};
const handleCloseOther = (path: string, routeIdx: number) => {
tabsRouterStore.subtractTabRouterOther({ path, routeIdx });
handleOperationEffect('other', routeIdx);
};
// 处理非当前路由操作的副作用
const handleOperationEffect = (type: 'other' | 'ahead' | 'behind', routeIndex: number) => {
const currentPath = router.currentRoute.value.path;
const { tabRouters } = tabsRouterStore;
const currentIdx = tabRouters.findIndex((i) => i.path === currentPath);
// 存在三种情况需要刷新当前路由
// 点击非当前路由的关闭其他、点击非当前路由的关闭左侧且当前路由小于触发路由、点击非当前路由的关闭右侧且当前路由大于触发路由
const needRefreshRouter =
(type === 'other' && currentIdx !== routeIndex) ||
(type === 'ahead' && currentIdx < routeIndex) ||
(type === 'behind' && currentIdx === -1);
if (needRefreshRouter) {
const nextRouteIdx = type === 'behind' ? tabRouters.length - 1 : 1;
const nextRouter = tabRouters[nextRouteIdx];
router.push({ path: nextRouter.path, query: nextRouter.query });
}
activeTabPath.value = null;
};
const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
if (ctx.trigger === 'document') activeTabPath.value = null;
if (visible) activeTabPath.value = path;
};
</script>