refactor(contentHeight): 重构，将PageWrapper的useContentHeight抽象为公共hook，满足自定义扩展组件时的自动…

…高度计算需求。同时优化高度计算算法。 (#826)

refactor(contentHeight): 重构，将PageWrapper的useContentHeight抽象为公共hook，满足自定义扩展组件时的自动…
…高度计算需求。同时优化高度计算算法。 (#826)
Lan · GitHub
1 parent 95c16a5d
Showing 3 changed files with 95 additions and 58 deletions
src/components/Page/src/PageWrapper.vue
src/components/Page/src/types.ts
src/components/Page/src/useContentHeight.ts → src/hooks/web/useContentHeight.ts
@@ -42,9 +42,7 @@
   import { propTypes } from '/@/utils/propTypes';
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
-  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
-  import { useContentHeight } from './useContentHeight';
-  import { WrapperProps } from './types';
+  import { useContentHeight } from '/@/hooks/web/useContentHeight';
  
   export default defineComponent({
     name: 'PageWrapper',
@@ -64,25 +62,23 @@
       fixedHeight: propTypes.bool,
     },
     setup(props, { slots }) {
-      const wrapperRef = ref<ElRef>(null);
-      const headerRef = ref<ComponentRef>(null);
-      const contentRef = ref<ElRef>(null);
-      const footerRef = ref<ComponentRef>(null);
+      const wrapperRef = ref(null);
+      const headerRef = ref(null);
+      const contentRef = ref(null);
+      const footerRef = ref(null);
       const { prefixCls } = useDesign('page-wrapper');
-      const { footerHeightRef } = useLayoutHeight();
  
-      const getProps = computed(() => {
-        return props as WrapperProps;
+      const getIsContentFullHeight = computed(() => {
+        return props.contentFullHeight;
       });
  
-      const { redoHeight, contentHeight } = useContentHeight(
-        getProps,
+      const { redoHeight, setCompensation, contentHeight } = useContentHeight(
+        getIsContentFullHeight,
         wrapperRef,
-        headerRef,
-        contentRef,
-        footerRef,
-        footerHeightRef
+        [headerRef, footerRef],
+        [contentRef]
       );
+      setCompensation({ useLayoutFooter: true, elements: [footerRef] });
  
       const getClass = computed(() => {
         return [
@@ -125,7 +121,7 @@
       });
  
       watch(
-        () => [getShowFooter.value, footerHeightRef.value],
+        () => [getShowFooter.value],
         () => {
           redoHeight();
         },
-import { CSSProperties } from 'vue';
-
-export interface WrapperProps {
-  title?: string;
-  dense: boolean;
-  ghost: boolean;
-  content: string;
-  contentStyle?: CSSProperties;
-  contentBackground: boolean;
-  contentFullHeight: boolean;
-  contentClass?: string;
-  fixedHeight: boolean;
-}
-import { ComputedRef, nextTick, Ref, ref, unref } from 'vue';
-import { WrapperProps } from './types';
+import { ComputedRef, nextTick, Ref, ref, unref, watch } from 'vue';
 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
 import { getViewportOffset } from '/@/utils/domUtils';
  
+export interface CompensationHeight {
+  // 使用 layout Footer 高度作为判断补偿高度的条件
+  useLayoutFooter: boolean;
+  // refs HTMLElement
+  elements?: Ref[];
+}
+
+/**
+ * 动态计算内容高度，根据锚点dom最下坐标到屏幕最下坐标，根据传入dom的高度、padding、margin等值进行动态计算
+ * 最终获取合适的内容高度
+ *
+ * @param flag 用于开启计算的响应式标识
+ * @param anchorRef 锚点组件 Ref<ElRef | ComponentRef>
+ * @param subtractHeightRefs 待减去高度的组件列表 Ref<ElRef | ComponentRef>
+ * @param substractSpaceRefs 待减去空闲空间(margins/paddings)的组件列表 Ref<ElRef | ComponentRef>
+ * @param offsetHeightRef 计算偏移的响应式高度，计算高度时将直接减去此值
+ * @returns 响应式高度
+ */
 export function useContentHeight(
-  propsRef: ComputedRef<WrapperProps>,
-  wrapperRef: Ref<ElRef>,
-  headerRef?: Ref<ComponentRef>,
-  contentRef?: Ref<ElRef>,
-  footerRef?: Ref<ComponentRef>,
-  layoutFooterHeightRef: Ref<number> = ref(0),
+  flag: ComputedRef<Boolean>,
+  anchorRef: Ref,
+  subtractHeightRefs: Ref[],
+  substractSpaceRefs: Ref[],
   offsetHeightRef: Ref<number> = ref(0)
 ) {
   const contentHeight: Ref<Nullable<number>> = ref(null);
+  const { footerHeightRef: layoutFooterHeightRef } = useLayoutHeight();
+  let compensationHeight: CompensationHeight = {
+    useLayoutFooter: true,
+  };
+
+  const setCompensation = (params: CompensationHeight) => {
+    compensationHeight = params;
+  };
  
-  const redoHeight = () => {
+  function redoHeight() {
     nextTick(() => {
       calcContentHeight();
     });
-  };
+  }
  
-  const subtractMargin = (element: HTMLElement | null | undefined): number => {
+  function calcSubtractSpace(element: HTMLDivElement | null | undefined): number {
     let subtractHeight = 0;
     const ZERO_PX = '0px';
     let marginBottom = ZERO_PX;
@@ -40,41 +64,61 @@ export function useContentHeight(
       subtractHeight += contentMarginTop;
     }
     return subtractHeight;
-  };
+  }
  
-  const calcContentHeight = async () => {
-    const { contentFullHeight } = unref(propsRef);
-    if (!contentFullHeight) {
+  function getEl(element: any): Nullable<HTMLDivElement> {
+    if (element == null) {
+      return null;
+    }
+    return (element instanceof HTMLDivElement ? element : element.$el) as HTMLDivElement;
+  }
+
+  async function calcContentHeight() {
+    if (!flag.value) {
       return;
     }
     // Add a delay to get the correct height
     await nextTick();
  
-    const wrapperEl = unref(wrapperRef);
+    const wrapperEl = getEl(unref(anchorRef));
     if (!wrapperEl) {
       return;
     }
     const { bottomIncludeBody } = getViewportOffset(wrapperEl);
-    const headerHeight = unref(headerRef)?.$el.offsetHeight ?? 0;
-    const footerHeight = unref(footerRef)?.$el.offsetHeight ?? 0;
  
-    // content's subtract
-    const substractHeight = subtractMargin(unref(contentRef));
+    // substract elements height
+    let substractHeight = 0;
+    subtractHeightRefs.forEach((item) => {
+      substractHeight += getEl(unref(item))?.offsetHeight ?? 0;
+    });
+
+    // subtract margins / paddings
+    let substractSpaceHeight = 0;
+    substractSpaceRefs.forEach((item) => {
+      substractSpaceHeight += calcSubtractSpace(getEl(unref(item)));
+    });
+
     let height =
       bottomIncludeBody -
       unref(layoutFooterHeightRef) -
       unref(offsetHeightRef) -
-      headerHeight -
-      footerHeight -
-      substractHeight;
+      substractHeight -
+      substractSpaceHeight;
  
-    // fix: compensation height both layout's footer and page's footer was shown
-    if (unref(layoutFooterHeightRef) > 0 && footerHeight > 0) {
-      height += footerHeight;
+    // compensation height
+    const calcCompensationHeight = () => {
+      compensationHeight.elements?.forEach((item) => {
+        height += getEl(unref(item))?.offsetHeight ?? 0;
+      });
+    };
+    if (compensationHeight.useLayoutFooter && unref(layoutFooterHeightRef) > 0) {
+      calcCompensationHeight();
+    } else {
+      calcCompensationHeight();
     }
  
     contentHeight.value = height;
-  };
+  }
  
   onMountedOrActivated(() => {
     nextTick(() => {
@@ -88,6 +132,16 @@ export function useContentHeight(
     50,
     { immediate: true }
   );
+  watch(
+    () => [layoutFooterHeightRef.value],
+    () => {
+      calcContentHeight();
+    },
+    {
+      flush: 'post',
+      immediate: true,
+    }
+  );
  
-  return { redoHeight, contentHeight };
+  return { redoHeight, setCompensation, contentHeight };
 }