Skip to content

Commit

Permalink
perf: optimize multiple-tab switching effect
Browse files Browse the repository at this point in the history
  • Loading branch information
anncwb committed Oct 11, 2020
1 parent 949db96 commit f2bdf0b
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 17 deletions.
4 changes: 2 additions & 2 deletions src/design/transition/base.less
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.transition-default() {
&-enter-active,
&-leave-active {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}

&-move {
transition: transform 0.6s;
transition: transform 0.5s;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/design/transition/breadcrumb.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.38s;
transition: all 0.24s;
}

.breadcrumb-enter-from,
Expand Down
8 changes: 4 additions & 4 deletions src/design/transition/fade.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
Expand All @@ -11,7 +11,7 @@
// side-fade
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.35s, transform 0.4s;
transition: opacity 0.3s, transform 0.35s;
}

.slide-enter-from,
Expand All @@ -32,7 +32,7 @@
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
transition: opacity 0.3s, transform 0.35s;
transition: opacity 0.2s, transform 0.25s;
}

.fade-bottom-enter-from,
Expand All @@ -53,7 +53,7 @@
// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
transition: opacity 0.3s, transform 0.35s;
transition: opacity 0.2s, transform 0.25s;
}

.fade-top-enter-from {
Expand Down
4 changes: 2 additions & 2 deletions src/design/transition/zoom.less
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
transition: opacity 0.2 ease-in-out, transform 0.2s ease-out;
}

.zoom-out-enter-from,
Expand All @@ -13,7 +13,7 @@
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.35s, opacity 0.35s ease-out;
transition: transform 0.2s, opacity 0.2s ease-out;
}

.zoom-fade-enter-from {
Expand Down
11 changes: 11 additions & 0 deletions src/hooks/web/useTabs.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { useTimeout } from '/@/hooks/core/useTimeout';
import { PageEnum } from '/@/enums/pageEnum';
import { TabItem, tabStore } from '/@/store/modules/tab';
import { appStore } from '/@/store/modules/app';
import router from '/@/router';

type Fn = () => void;
type RouteFn = (tabItem: TabItem) => void;

Expand Down Expand Up @@ -66,5 +70,12 @@ export function useTabs() {
closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab),
closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab),
resetCache: () => canIUseFn() && resetCache(),
addTab: (path: PageEnum, goTo = false) => {
useTimeout(() => {
tabStore.addTabByPathAction(path);
}, 0);

goTo && router.push(path);
},
};
}
8 changes: 4 additions & 4 deletions src/layouts/default/LayoutMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue';
import { BasicMenu } from '/@/components/Menu/index';
import Logo from '/@/layouts/Logo.vue';

import { PageEnum } from '/@/enums/pageEnum';
import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';

// store
Expand All @@ -20,10 +19,11 @@ import {
getFlatChildrenMenus,
getCurrentParentPath,
} from '/@/router/menus/index';
import { useGo } from '/@/hooks/web/usePage';
import { useRouter } from 'vue-router';
import { useThrottle } from '/@/hooks/core/useThrottle';
import { permissionStore } from '/@/store/modules/permission';
import { useTabs } from '/@/hooks/web/useTabs';
import { PageEnum } from '/@/enums/pageEnum';

// import
export default defineComponent({
Expand Down Expand Up @@ -54,6 +54,7 @@ export default defineComponent({
const menusRef = ref<Menu[]>([]);
const flatMenusRef = ref<Menu[]>([]);
const { currentRoute } = useRouter();
const { addTab } = useTabs();

const getProjectConfigRef = computed(() => {
return appStore.getProjectConfig;
Expand All @@ -63,7 +64,6 @@ export default defineComponent({
return unref(getProjectConfigRef).menuSetting.mode === MenuModeEnum.HORIZONTAL;
});

const go = useGo();
onMounted(() => {
genMenus();
});
Expand Down Expand Up @@ -144,7 +144,7 @@ export default defineComponent({
if (splitType === MenuSplitTyeEnum.TOP) {
menuStore.commitCurrentTopSplitMenuPathState(path);
}
go(path as PageEnum);
addTab(path as PageEnum, true);
}
}

Expand Down
15 changes: 13 additions & 2 deletions src/layouts/default/multitabs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { TabContentProps } from './tab.data';
import type { TabItem } from '/@/store/modules/tab';
import type { AppRouteRecordRaw } from '/@/router/types';

import { defineComponent, watch, computed, ref, unref } from 'vue';
import { defineComponent, watch, computed, ref, unref, onMounted } from 'vue';
import { Tabs } from 'ant-design-vue';
import TabContent from './TabContent';

Expand All @@ -16,12 +16,21 @@ import './index.less';
import { tabStore } from '/@/store/modules/tab';
import { closeTab } from './useTabDropdown';
import router from '/@/router';
import { useTabs } from '/@/hooks/web/useTabs';
import { PageEnum } from '/@/enums/pageEnum';

export default defineComponent({
name: 'MultiTabs',
setup() {
let isAddAffix = false;
const go = useGo();
const { currentRoute } = useRouter();

onMounted(() => {
const { addTab } = useTabs();
addTab(unref(currentRoute).path as PageEnum);
});

// 当前激活tab
const activeKeyRef = ref<string>('');
// 当前tab列表
Expand All @@ -38,7 +47,9 @@ export default defineComponent({
}
activeKeyRef.value = path;

tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
// 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象?
// 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
},
{
immediate: true,
Expand Down
4 changes: 4 additions & 0 deletions src/router/guard/pageLoadingGuard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { userStore } from '/@/store/modules/user';
export function createPageLoadingGuard(router: Router) {
let isFirstLoad = true;
router.beforeEach(async (to) => {
console.log('======================');
console.log(2);
console.log('======================');
const {
openKeepAlive,
openRouterTransition,
Expand All @@ -21,6 +24,7 @@ export function createPageLoadingGuard(router: Router) {
}
if (show && openKeepAlive && !isFirstLoad) {
const tabList = tabStore.getTabsState;

const isOpen = tabList.some((tab) => tab.path === to.path);
appStore.setPageLoadingAction(!isOpen);
} else {
Expand Down
8 changes: 8 additions & 0 deletions src/store/modules/tab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,14 @@ class Tab extends VuexModule {
}
}

@Action
addTabByPathAction(path: string): void {
if (!path) return;
const routes = router.getRoutes();
const to = routes.find((item) => item.path === path);
to && this.commitAddTab((to as unknown) as AppRouteRecordRaw);
}

@Action
closeRightTabAction(route: AppRouteRecordRaw | TabItem): void {
const index = this.tabsState.findIndex((item) => item.path === route.path);
Expand Down
25 changes: 23 additions & 2 deletions src/views/demo/feat/tabs/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,40 @@
<a-button class="mr-2" @click="closeOther">关闭其他</a-button>
<a-button class="mr-2" @click="closeCurrent">关闭当前</a-button>
<a-button class="mr-2" @click="refreshPage">刷新当前</a-button>
<a-button class="mr-2" @click="openTab">打开图标界面tab</a-button>
</CollapseContainer>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { PageEnum } from '/@/enums/pageEnum';
import { useTabs } from '/@/hooks/web/useTabs';
export default defineComponent({
name: 'TabsDemo',
components: { CollapseContainer },
setup() {
const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTabs();
return { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage };
const {
closeAll,
closeLeft,
closeRight,
closeOther,
closeCurrent,
refreshPage,
addTab,
} = useTabs();
return {
closeAll,
closeLeft,
closeRight,
closeOther,
closeCurrent,
refreshPage,
openTab: () => {
addTab('/feat/icon' as PageEnum, true);
},
};
},
});
</script>

0 comments on commit f2bdf0b

Please sign in to comment.