From 9abf1763c78ead7de21ece6d328337a6a1da5f05 Mon Sep 17 00:00:00 2001 From: vben Date: Fri, 30 Oct 2020 23:00:51 +0800 Subject: [PATCH] perf(modal): optimize table embedding height calculation problem --- CHANGELOG.zh_CN.md | 5 +++ src/components/Modal/src/BasicModal.tsx | 6 ++-- src/components/Modal/src/ModalWrapper.tsx | 35 ++++++++++--------- src/components/Modal/src/provideModal.ts | 11 ++++++ .../Table/src/hooks/useTableScroll.ts | 29 ++++++++------- 5 files changed, 52 insertions(+), 34 deletions(-) create mode 100644 src/components/Modal/src/provideModal.ts diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 2698357d..45c2b45e 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -12,6 +12,11 @@ - 表单代码优化重构 +### ⚡ Performance Improvements + +- Modal slot 可以覆盖 +- 优化表格嵌入高度计算问题 + ### 🎫 Chores - 添加部分注释 diff --git a/src/components/Modal/src/BasicModal.tsx b/src/components/Modal/src/BasicModal.tsx index 62224431..824b7990 100644 --- a/src/components/Modal/src/BasicModal.tsx +++ b/src/components/Modal/src/BasicModal.tsx @@ -225,11 +225,11 @@ export default defineComponent({ {...{ ...attrs, ...props, ...unref(getProps) }} > {{ - ...extendSlots(slots, ['default']), - default: () => renderContent(), - closeIcon: () => renderClose(), footer: () => renderFooter(), + closeIcon: () => renderClose(), title: () => renderTitle(), + ...extendSlots(slots, ['default']), + default: () => renderContent(), }} ); diff --git a/src/components/Modal/src/ModalWrapper.tsx b/src/components/Modal/src/ModalWrapper.tsx index af128677..1b198e9c 100644 --- a/src/components/Modal/src/ModalWrapper.tsx +++ b/src/components/Modal/src/ModalWrapper.tsx @@ -15,10 +15,12 @@ import { import { Spin } from 'ant-design-vue'; import { useWindowSizeFn } from '/@/hooks/event/useWindowSize'; -import { useTimeout } from '/@/hooks/core/useTimeout'; +// import { useTimeout } from '/@/hooks/core/useTimeout'; import { getSlot } from '/@/utils/helper/tsxHelper'; import { useElResize } from '/@/hooks/event/useElResize'; +import { provideModal } from './provideModal'; + export default defineComponent({ name: 'ModalWrapper', props: { @@ -56,6 +58,11 @@ export default defineComponent({ const wrapperRef = ref(null); const spinRef = ref(null); const realHeightRef = ref(0); + // 重试次数 + // let tryCount = 0; + let stopElResizeFn: Fn = () => {}; + + provideModal(setModalHeight); const wrapStyle = computed(() => { return { @@ -65,10 +72,6 @@ export default defineComponent({ }; }); - // 重试次数 - let tryCount = 0; - let stopElResizeFn: Fn = () => {}; - watchEffect(() => { setModalHeight(); }); @@ -123,17 +126,17 @@ export default defineComponent({ } await nextTick(); const spinEl = unref(spinRef); - if (!spinEl) { - useTimeout(() => { - // retry - if (tryCount < 3) { - setModalHeight(); - } - tryCount++; - }, 10); - return; - } - tryCount = 0; + // if (!spinEl) { + // useTimeout(() => { + // // retry + // if (tryCount < 3) { + // setModalHeight(); + // } + // tryCount++; + // }, 10); + // return; + // } + // tryCount = 0; const spinContainerEl = spinEl.$el.querySelector('.ant-spin-container') as HTMLElement; if (!spinContainerEl) return; diff --git a/src/components/Modal/src/provideModal.ts b/src/components/Modal/src/provideModal.ts new file mode 100644 index 00000000..ced013fd --- /dev/null +++ b/src/components/Modal/src/provideModal.ts @@ -0,0 +1,11 @@ +import { provide, inject } from 'vue'; + +const key = Symbol('basic-modal'); + +export function provideModal(redoHeight: Fn) { + provide(key, redoHeight); +} + +export function injectModal(): Fn { + return inject(key) as Fn; +} diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index eb01544e..a137da0f 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -6,47 +6,44 @@ import { isBoolean } from '/@/utils/is'; import { useTimeout } from '/@/hooks/core/useTimeout'; import { useWindowSizeFn } from '/@/hooks/event/useWindowSize'; import { useProps } from './useProps'; +import { injectModal } from '/@/components/Modal/src/provideModal'; export function useTableScroll(refProps: ComputedRef, tableElRef: Ref) { const { propsRef } = useProps(refProps); const tableHeightRef: Ref = ref(null); + const redoModalHeight = injectModal(); + watch( () => unref(propsRef).canResize, () => { redoHeight(); } ); + function redoHeight() { const { canResize } = unref(propsRef); - if (!canResize) { - return; - } + if (!canResize) return; calcTableHeight(); } async function calcTableHeight(cb?: () => void) { const { canResize, resizeHeightOffset, pagination, maxHeight } = unref(propsRef); - if (!canResize) { - return; - } + if (!canResize) return; + await nextTick(); const table = unref(tableElRef) as any; + if (!table) return; - if (!table) { - return; - } const tableEl: Element = table.$el; - if (!tableEl) { - return; - } + if (!tableEl) return; + const el: HTMLElement | null = tableEl.querySelector('.ant-table-thead '); // const layoutMain: Element | null = document.querySelector('.default-layout__main '); - if (!el) { - return; - } + if (!el) return; + // 表格距离底部高度 const { bottomIncludeBody } = getViewportOffset(el); // 表格高度+距离底部高度-自定义偏移量 @@ -89,6 +86,8 @@ export function useTableScroll(refProps: ComputedRef, tableElRe tableHeightRef.value = tableHeightRef.value! > maxHeight! ? (maxHeight as number) : tableHeightRef.value; cb && cb(); + // 解决表格放modal内的时候，modal自适应高度计算问题 + redoModalHeight && redoModalHeight(); }, 0); } -- GitLab