Skip to content

Commit

Permalink
perf(modal): optimize table embedding height calculation problem
Browse files Browse the repository at this point in the history
  • Loading branch information
anncwb committed Oct 30, 2020
1 parent 84c9d78 commit 9abf176
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 34 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@

- 表单代码优化重构

### ⚡ Performance Improvements

- Modal slot 可以覆盖
- 优化表格嵌入高度计算问题

### 🎫 Chores

- 添加部分注释
Expand Down
6 changes: 3 additions & 3 deletions src/components/Modal/src/BasicModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
35 changes: 19 additions & 16 deletions src/components/Modal/src/ModalWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 {
Expand All @@ -65,10 +72,6 @@ export default defineComponent({
};
});

// 重试次数
let tryCount = 0;
let stopElResizeFn: Fn = () => {};

watchEffect(() => {
setModalHeight();
});
Expand Down Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions src/components/Modal/src/provideModal.ts
Original file line number Diff line number Diff line change
@@ -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;
}
29 changes: 14 additions & 15 deletions src/components/Table/src/hooks/useTableScroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 表格高度+距离底部高度-自定义偏移量
Expand Down Expand Up @@ -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);
}

Expand Down

0 comments on commit 9abf176

Please sign in to comment.