fix(useViewHeight): Fix the problem that useContentViewHeight does not calculate the footer (#747)

Co-authored-by: NorthLan <lan6995@gmail.com>

fix(useViewHeight): Fix the problem that useContentViewHeight does not calculate the footer (#747)
Co-authored-by: NorthLan <lan6995@gmail.com>
Lan · GitHub
1 parent c6b766d8
Showing 4 changed files with 42 additions and 6 deletions
src/components/Page/src/PageWrapper.vue
src/layouts/default/content/useContentViewHeight.ts
src/layouts/default/footer/index.vue
src/layouts/default/header/MultipleHeader.vue
@@ -44,6 +44,8 @@
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
   import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+
   export default defineComponent({
     name: 'PageWrapper',
     components: { PageFooter, PageHeader },
@@ -67,6 +69,7 @@
       const footerHeight = ref(0);
       const { prefixCls, prefixVar } = useDesign('page-wrapper');
       const { contentHeight, setPageHeight, pageHeight } = usePageContext();
+      const { footerHeightRef } = useLayoutHeight();
       const getClass = computed(() => {
         return [
@@ -109,7 +112,7 @@
       });
       watch(
-        () => [contentHeight?.value, getShowFooter.value],
+        () => [contentHeight?.value, getShowFooter.value, footerHeightRef.value],
         () => {
           calcContentHeight();
         },
 import { ref, computed, unref } from 'vue';
 import { createPageContext } from '/@/hooks/component/usePageContext';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
-export const headerHeightRef = ref(0);
+
+const headerHeightRef = ref(0);
+const footerHeightRef = ref(0);
+
+export function useLayoutHeight() {
+  function setHeaderHeight(val) {
+    headerHeightRef.value = val;
+  }
+  function setFooterHeight(val) {
+    footerHeightRef.value = val;
+  }
+  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
+}
 export function useContentViewHeight() {
   const contentHeight = ref(window.innerHeight);
@@ -12,7 +12,7 @@
 </template>
 <script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
+  import { computed, defineComponent, unref, ref } from 'vue';
   import { Layout } from 'ant-design-vue';
   import { GithubFilled } from '@ant-design/icons-vue';
@@ -24,6 +24,7 @@
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useRouter } from 'vue-router';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
   export default defineComponent({
     name: 'LayoutFooter',
@@ -34,10 +35,29 @@
       const { currentRoute } = useRouter();
       const { prefixCls } = useDesign('layout-footer');
+      const footerRef = ref<ComponentRef>(null);
+      const { setFooterHeight } = useLayoutHeight();
+
       const getShowLayoutFooter = computed(() => {
+        if (unref(getShowFooter)) {
+          const footerEl = unref(footerRef)?.$el;
+          setFooterHeight(footerEl?.offsetHeight || 0);
+        } else {
+          setFooterHeight(0);
+        }
         return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
       });
-      return { getShowLayoutFooter, prefixCls, t, DOC_URL, GITHUB_URL, SITE_URL, openWindow };
+
+      return {
+        getShowLayoutFooter,
+        prefixCls,
+        t,
+        DOC_URL,
+        GITHUB_URL,
+        SITE_URL,
+        openWindow,
+        footerRef,
+      };
     },
   });
 </script>
@@ -17,7 +17,7 @@
   import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { headerHeightRef } from '../content/useContentViewHeight';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
   const HEADER_HEIGHT = 48;
@@ -26,6 +26,7 @@
     name: 'LayoutMultipleHeader',
     components: { LayoutHeader, MultipleTabs },
     setup() {
+      const { setHeaderHeight } = useLayoutHeight();
       const { prefixCls } = useDesign('layout-multiple-header');
       const { getCalcContentWidth, getSplit } = useMenuSetting();
@@ -77,7 +78,7 @@
         if (unref(getShowMultipleTab) && !unref(getFullContent)) {
           height += TABS_HEIGHT;
         }
-        headerHeightRef.value = height;
+        setHeaderHeight(height);
         return {
           height: `${height}px`,
         };