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

perf(route): refactor guard

Browse Source
This commit is contained in:
vben
2020-12-28 01:31:41 +08:00
parent 899963ba7b
commit 3b126e011c
10 changed files with 127 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Modal/src/BasicModal.vue
View File

@@ -16,6 +16,7 @@
<template #footer v-if="!$slots.footer">
<ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel" />
</template>
<ModalWrapper
:useWrapper="getProps.useWrapper"
:footerOffset="wrapperFooterOffset"
@@ -30,6 +31,10 @@
>
<slot />
</ModalWrapper>
<template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
<slot :name="item" v-bind="data" />
</template>
</Modal>
</template>
<script lang="ts">

12
src/components/Modal/src/components/ModalWrapper.vue
View File

@@ -48,6 +48,7 @@
const wrapperRef = ref<ComponentRef>(null);
const spinRef = ref<ElRef>(null);
const realHeightRef = ref(0);
const minRealHeightRef = ref(0);
let stopElResizeFn: Fn = () => {};
@@ -82,10 +83,13 @@
watch(
() => props.fullScreen,
() => {
setTimeout(() => {
setModalHeight();
}, 0);
(v) => {
setModalHeight();
if (!v) {
realHeightRef.value = minRealHeightRef.value;
} else {
minRealHeightRef.value = realHeightRef.value;
}
}
);

30
src/components/Modal/src/hooks/useModalFullScreen.ts
View File

@@ -7,7 +7,7 @@ export interface UseFullScreenContext {
}
export function useFullScreen(context: UseFullScreenContext) {
const formerHeightRef = ref(0);
// const formerHeightRef = ref(0);
const fullScreenRef = ref(false);
const getWrapClassName = computed(() => {
@@ -20,25 +20,25 @@ export function useFullScreen(context: UseFullScreenContext) {
e && e.stopPropagation();
fullScreenRef.value = !unref(fullScreenRef);
const modalWrapper = unref(context.modalWrapperRef);
// const modalWrapper = unref(context.modalWrapperRef);
if (!modalWrapper) return;
// if (!modalWrapper) return;
const wrapperEl = modalWrapper.$el as HTMLElement;
if (!wrapperEl) return;
const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;
// const wrapperEl = modalWrapper.$el as HTMLElement;
// if (!wrapperEl) return;
// const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;
if (!modalWrapSpinEl) return;
// if (!modalWrapSpinEl) return;
if (!unref(formerHeightRef) && unref(fullScreenRef)) {
formerHeightRef.value = modalWrapSpinEl.offsetHeight;
}
// if (!unref(formerHeightRef) && unref(fullScreenRef)) {
// formerHeightRef.value = modalWrapSpinEl.offsetHeight;
// }
if (unref(fullScreenRef)) {
modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`;
} else {
modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
}
// if (unref(fullScreenRef)) {
// modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`;
// } else {
// modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
// }
}
return { getWrapClassName, handleFullScreen, fullScreenRef };
}