canrd-outside / order-erp-front · Commits

Commit 33cd8fe6533830176ab63ddfc4d74f75a384366c

Authored by Lan
Committed by GitHub
1 parent c6b766d8

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

Co-authored-by: NorthLan <lan6995@gmail.com>
Inline Side-by-side
Showing 4 changed files with 42 additions and 6 deletions
src/components/Page/src/PageWrapper.vue
  View file @33cd8fe
... ... @@ -44,6 +44,8 @@
44 44 import { omit } from 'lodash-es';
45 45 import { PageHeader } from 'ant-design-vue';
46 46 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
  47 + import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
  48 +
47 49 export default defineComponent({
48 50 name: 'PageWrapper',
49 51 components: { PageFooter, PageHeader },
... ... @@ -67,6 +69,7 @@
67 69 const footerHeight = ref(0);
68 70 const { prefixCls, prefixVar } = useDesign('page-wrapper');
69 71 const { contentHeight, setPageHeight, pageHeight } = usePageContext();
  72 + const { footerHeightRef } = useLayoutHeight();
70 73  
71 74 const getClass = computed(() => {
72 75 return [
... ... @@ -109,7 +112,7 @@
109 112 });
110 113  
111 114 watch(
112   - () => [contentHeight?.value, getShowFooter.value],
  115 + () => [contentHeight?.value, getShowFooter.value, footerHeightRef.value],
113 116 () => {
114 117 calcContentHeight();
115 118 },
... ...
src/layouts/default/content/useContentViewHeight.ts
  View file @33cd8fe
1 1 import { ref, computed, unref } from 'vue';
2 2 import { createPageContext } from '/@/hooks/component/usePageContext';
3 3 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
4   -export const headerHeightRef = ref(0);
  4 +
  5 +const headerHeightRef = ref(0);
  6 +const footerHeightRef = ref(0);
  7 +
  8 +export function useLayoutHeight() {
  9 + function setHeaderHeight(val) {
  10 + headerHeightRef.value = val;
  11 + }
  12 + function setFooterHeight(val) {
  13 + footerHeightRef.value = val;
  14 + }
  15 + return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
  16 +}
5 17  
6 18 export function useContentViewHeight() {
7 19 const contentHeight = ref(window.innerHeight);
... ...
src/layouts/default/footer/index.vue
  View file @33cd8fe
... ... @@ -12,7 +12,7 @@
12 12 </template>
13 13  
14 14 <script lang="ts">
15   - import { computed, defineComponent, unref } from 'vue';
  15 + import { computed, defineComponent, unref, ref } from 'vue';
16 16 import { Layout } from 'ant-design-vue';
17 17  
18 18 import { GithubFilled } from '@ant-design/icons-vue';
... ... @@ -24,6 +24,7 @@
24 24 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
25 25 import { useRouter } from 'vue-router';
26 26 import { useDesign } from '/@/hooks/web/useDesign';
  27 + import { useLayoutHeight } from '../content/useContentViewHeight';
27 28  
28 29 export default defineComponent({
29 30 name: 'LayoutFooter',
... ... @@ -34,10 +35,29 @@
34 35 const { currentRoute } = useRouter();
35 36 const { prefixCls } = useDesign('layout-footer');
36 37  
  38 + const footerRef = ref<ComponentRef>(null);
  39 + const { setFooterHeight } = useLayoutHeight();
  40 +
37 41 const getShowLayoutFooter = computed(() => {
  42 + if (unref(getShowFooter)) {
  43 + const footerEl = unref(footerRef)?.$el;
  44 + setFooterHeight(footerEl?.offsetHeight || 0);
  45 + } else {
  46 + setFooterHeight(0);
  47 + }
38 48 return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
39 49 });
40   - return { getShowLayoutFooter, prefixCls, t, DOC_URL, GITHUB_URL, SITE_URL, openWindow };
  50 +
  51 + return {
  52 + getShowLayoutFooter,
  53 + prefixCls,
  54 + t,
  55 + DOC_URL,
  56 + GITHUB_URL,
  57 + SITE_URL,
  58 + openWindow,
  59 + footerRef,
  60 + };
41 61 },
42 62 });
43 63 </script>
... ...
src/layouts/default/header/MultipleHeader.vue
  View file @33cd8fe
... ... @@ -17,7 +17,7 @@
17 17 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
18 18 import { useAppInject } from '/@/hooks/web/useAppInject';
19 19 import { useDesign } from '/@/hooks/web/useDesign';
20   - import { headerHeightRef } from '../content/useContentViewHeight';
  20 + import { useLayoutHeight } from '../content/useContentViewHeight';
21 21  
22 22 const HEADER_HEIGHT = 48;
23 23  
... ... @@ -26,6 +26,7 @@
26 26 name: 'LayoutMultipleHeader',
27 27 components: { LayoutHeader, MultipleTabs },
28 28 setup() {
  29 + const { setHeaderHeight } = useLayoutHeight();
29 30 const { prefixCls } = useDesign('layout-multiple-header');
30 31  
31 32 const { getCalcContentWidth, getSplit } = useMenuSetting();
... ... @@ -77,7 +78,7 @@
77 78 if (unref(getShowMultipleTab) && !unref(getFullContent)) {
78 79 height += TABS_HEIGHT;
79 80 }
80   - headerHeightRef.value = height;
  81 + setHeaderHeight(height);
81 82 return {
82 83 height: `${height}px`,
83 84 };
... ...