diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 2698357d7f0ff09f897e2e2f5098dae450a62ac8..45c2b45ede84b4693b891a6a71fa18859eb23365 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 62224431a85228f519e2fecf0eff8292d506805d..824b7990bf9d376d3918a99a9dedea4ec603e2b0 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 af128677f185d8e249aabcc07ea7dccd8dd7ab9f..1b198e9cb61ca417aa0e076abcc977596597a6b3 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 0000000000000000000000000000000000000000..ced013fd6f61c159b580b329a3981c86948069ec --- /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 eb01544e5fa2619fab9709fcaaf72dd65d965106..a137da0f11c46a99fdd3067eed70d16f352a02d8 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); }