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

feat: 多标签Tab页支持拖拽排序 (#426)

Browse Source 
* feat: 多标签页Tab页支持拖拽排序

* fix: 和HomePage换序 不做处理

* fix: 右键关闭逻辑调整

* chore: 补充类型声明
This commit is contained in:
liweijie0812 2023-02-21 11:36:05 +08:00 committed by GitHub
parent 24d913df16
commit cfddfa03bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,14 @@
<t-layout :class="`${prefix}-layout`">
<t-tabs
v-if="settingStore.isUseTabsRouter"
drag-sort
theme="card"
:class="`${prefix}-layout-tabs-nav`"
:value="$route.path"
:style="{ position: 'sticky', top: 0, width: '100%' }"
@change="handleChangeCurrentTab"
@remove="handleRemove"
@drag-sort="handleDragend"
>
<t-tab-panel
v-for="(routeItem, index) in tabRouters"
@ -147,4 +149,13 @@ const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
if (ctx.trigger === 'document') activeTabPath.value = null;
if (visible) activeTabPath.value = path;
};
const handleDragend = (options: { currentIndex: number; targetIndex: number }) => {
const { tabRouters } = tabsRouterStore;
[tabRouters[options.currentIndex], tabRouters[options.targetIndex]] = [
tabRouters[options.targetIndex],
tabRouters[options.currentIndex],
];
};
</script>

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

@ -49,17 +49,28 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
// 处理关闭右侧
subtractTabRouterBehind(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = this.tabRouterList.slice(0, routeIdx + 1);
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(0, routeIdx + 1);
if (routeIdx < homeIdx) {
tabRouterList = tabRouterList.concat(homeRoute);
}
this.tabRouterList = tabRouterList;
},
// 处理关闭左侧
subtractTabRouterAhead(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = homeRoute.concat(this.tabRouterList.slice(routeIdx));
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(routeIdx);
if (routeIdx > homeIdx) {
tabRouterList = homeRoute.concat(tabRouterList);
}
this.tabRouterList = tabRouterList;
},
// 处理关闭其他
subtractTabRouterOther(newRoute: TRouterInfo) {
const { routeIdx } = newRoute;
this.tabRouterList = routeIdx === 0 ? homeRoute : homeRoute.concat([this.tabRouterList?.[routeIdx]]);
const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
this.tabRouterList = routeIdx === homeIdx ? homeRoute : homeRoute.concat([this.tabRouterList?.[routeIdx]]);
},
removeTabRouterList() {
this.tabRouterList = [];