perf(modal): optimize table embedding height calculation problem

vbenjs · Oct 30, 2020 · 9abf176 · 9abf176
1 parent 84c9d78
commit 9abf176
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 34 deletions.
diff --git 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
@@ -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(),
         }}
       </Modal>
     );

diff --git 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<HTMLElement | null>(null);
     const spinRef = ref<any>(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
@@ -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
@@ -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<BasicTableProps>, tableElRef: Ref<any>) {
   const { propsRef } = useProps(refProps);
 
   const tableHeightRef: Ref<number | null> = 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<BasicTableProps>, tableElRe
       tableHeightRef.value =
         tableHeightRef.value! > maxHeight! ? (maxHeight as number) : tableHeightRef.value;
       cb && cb();
+      //  解决表格放modal内的时候，modal自适应高度计算问题
+      redoModalHeight && redoModalHeight();
     }, 0);
   }