github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-28 00:42:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(tabs): perf multiple-tabs

Browse Source
This commit is contained in:
vben
2020-12-13 23:06:20 +08:00
parent 27e50b4747
commit f81c401959
3 changed files with 3 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/layouts/default/index.less
View File

@@ -1,17 +0,0 @@
@import (reference) '../../design/index.less';
.default-layout {
display: flex;
width: 100%;
min-height: 100%;
background: @content-bg;
flex-direction: column;
> .ant-layout {
min-height: 100%;
}
&__main {
margin-left: 1px;
}
}

75
src/layouts/default/index.tsx
View File

@@ -1,75 +0,0 @@
import './index.less';
import { defineComponent, unref, ref } from 'vue';
import { Layout } from 'ant-design-vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import LayoutHeader from './header/LayoutHeader';
import LayoutContent from './content/index.vue';
import LayoutSideBar from './sider';
import LayoutMultipleHeader from './header/LayoutMultipleHeader';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { createLayoutContext } from './useLayoutContext';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
import { isMobile } from '/@/utils/is';
const LayoutFeatures = createAsyncComponent(() => import('/@/layouts/default/feature/index.vue'));
const LayoutFooter = createAsyncComponent(() => import('/@/layouts/default/footer/index.vue'));
export default defineComponent({
name: 'DefaultLayout',
setup() {
const headerRef = ref<ComponentRef>(null);
const isMobileRef = ref(false);
createLayoutContext({ fullHeader: headerRef, isMobile: isMobileRef });
createBreakpointListen(() => {
isMobileRef.value = isMobile();
});
// ! Only register global components here
// ! Can reduce the size of the first screen code
// default layout It is loaded after login. So it won’t be packaged to the first screen
registerGlobComp();
const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar } = useMenuSetting();
return () => {
return (
<Layout class="default-layout">
{() => (
<>
<LayoutFeatures />
{unref(getShowFullHeaderRef) && <LayoutHeader fixed={true} ref={headerRef} />}
<Layout>
{() => (
<>
{unref(getShowSidebar) && <LayoutSideBar />}
<Layout class="default-layout__main">
{() => (
<>
<LayoutMultipleHeader />
<LayoutContent />
<LayoutFooter />
</>
)}
</Layout>
</>
)}
</Layout>
</>
)}
</Layout>
);
};
},
});

6
src/layouts/default/useLayoutContext.ts
View File

@@ -6,12 +6,12 @@ export interface LayoutContextProps {
isMobile: Ref<boolean>; isMobile: Ref<boolean>;
} }
const layoutContextInjectKey: InjectionKey<LayoutContextProps> = Symbol(); const key: InjectionKey<LayoutContextProps> = Symbol();
export function createLayoutContext(context: LayoutContextProps) { export function createLayoutContext(context: LayoutContextProps) {
return createContext<LayoutContextProps>(context, layoutContextInjectKey); return createContext<LayoutContextProps>(context, key);
} }
export function useLayoutContext() { export function useLayoutContext() {
return useContext<LayoutContextProps>(layoutContextInjectKey); return useContext<LayoutContextProps>(key);
} }