canrd-outside / order-erp-front · Commits

Commit fcff2cb1911f1e18017f25b3509d1c67f7e86e81

Authored by ztw2010
Committed by GitHub
1 parent e8fe6a92

fix(page-wraper): fix PageWrapper the scroll bar on the right side of the conten… 

…t area when the user clicks on the tab page to reload the page (#341)
Inline Side-by-side
Showing 2 changed files with 93 additions and 70 deletions
src/components/Page/src/PageWrapper.vue
  View file @fcff2cb
... ... @@ -18,7 +18,7 @@
18 18 </template>
19 19 </PageHeader>
20 20 <div
21   - class="m-4 overflow-hidden"
  21 + class="overflow-hidden"
22 22 :class="[`${prefixCls}-content`, contentClass]"
23 23 :style="getContentStyle"
24 24 >
... ... @@ -109,21 +109,38 @@
109 109 return;
110 110 }
111 111 nextTick(() => {
112   - const footer = unref(footerRef);
113   - const header = unref(headerRef);
114   - footerHeight.value = 0;
115   - const footerEl = footer?.$el;
  112 + //fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
  113 + setTimeout(() => {
  114 + const footer = unref(footerRef);
  115 + const header = unref(headerRef);
  116 + footerHeight.value = 0;
  117 + const footerEl = footer?.$el;
116 118  
117   - if (footerEl) {
118   - footerHeight.value += footerEl?.offsetHeight ?? 0;
119   - }
120   - let headerHeight = 0;
121   - const headerEl = header?.$el;
122   - if (headerEl) {
123   - headerHeight += headerEl?.offsetHeight ?? 0;
124   - }
125   -
126   - setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight);
  119 + if (footerEl) {
  120 + footerHeight.value += footerEl?.offsetHeight ?? 0;
  121 + }
  122 + let headerHeight = 0;
  123 + const headerEl = header?.$el;
  124 + if (headerEl) {
  125 + headerHeight += headerEl?.offsetHeight ?? 0;
  126 + }
  127 + //fix:subtract content's marginTop and marginBottom value
  128 + let subtractHeight = 0;
  129 + const attributes = getComputedStyle(
  130 + document.querySelectorAll('.vben-page-wrapper-content')[0]
  131 + );
  132 + if (attributes.marginBottom) {
  133 + const contentMarginBottom = Number(attributes.marginBottom.replace(/[^\d]/g, ''));
  134 + subtractHeight += contentMarginBottom;
  135 + }
  136 + if (attributes.marginTop) {
  137 + const contentMarginTop = Number(attributes.marginTop.replace(/[^\d]/g, ''));
  138 + subtractHeight += contentMarginTop;
  139 + }
  140 + setPageHeight?.(
  141 + unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
  142 + );
  143 + }, 400);
127 144 });
128 145 },
129 146 {
... ... @@ -151,6 +168,9 @@
151 168 .@{prefix-cls} {
152 169 position: relative;
153 170  
  171 + .@{prefix-cls}-content {
  172 + margin: 16px 16px 0 16px;
  173 + }
154 174 .ant-page-header {
155 175 &:empty {
156 176 padding: 0;
... ...
src/components/Table/src/hooks/useTableScroll.ts
  View file @fcff2cb
... ... @@ -62,68 +62,71 @@ export function useTableScroll(
62 62 if (!unref(getCanResize)) return;
63 63  
64 64 await nextTick();
65   - const table = unref(tableElRef);
66   - if (!table) return;
67   -
68   - const tableEl: Element = table.$el;
69   - if (!tableEl) return;
70   -
71   - const headEl = tableEl.querySelector('.ant-table-thead ');
72   -
73   - if (!headEl) return;
74   -
75   - // Table height from bottom
76   - const { bottomIncludeBody } = getViewportOffset(headEl);
77   - // Table height from bottom height-custom offset
78   -
79   - const paddingHeight = 32;
80   - const borderHeight = 0;
81   - // Pager height
82   - let paginationHeight = 2;
83   - if (!isBoolean(pagination)) {
84   - if (!paginationEl) {
85   - paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
86   - }
87   - if (paginationEl) {
88   - const offsetHeight = paginationEl.offsetHeight;
89   - paginationHeight += offsetHeight || 0;
90   - } else {
91   - // TODO First fix 24
92   - paginationHeight += 24;
  65 + //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
  66 + setTimeout(() => {
  67 + const table = unref(tableElRef);
  68 + if (!table) return;
  69 +
  70 + const tableEl: Element = table.$el;
  71 + if (!tableEl) return;
  72 +
  73 + const headEl = tableEl.querySelector('.ant-table-thead ');
  74 +
  75 + if (!headEl) return;
  76 +
  77 + // Table height from bottom
  78 + const { bottomIncludeBody } = getViewportOffset(headEl);
  79 + // Table height from bottom height-custom offset
  80 +
  81 + const paddingHeight = 32;
  82 + const borderHeight = 0;
  83 + // Pager height
  84 + let paginationHeight = 2;
  85 + if (!isBoolean(pagination)) {
  86 + if (!paginationEl) {
  87 + paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
  88 + }
  89 + if (paginationEl) {
  90 + const offsetHeight = paginationEl.offsetHeight;
  91 + paginationHeight += offsetHeight || 0;
  92 + } else {
  93 + // TODO First fix 24
  94 + paginationHeight += 24;
  95 + }
93 96 }
94   - }
95 97  
96   - let footerHeight = 0;
97   - if (!isBoolean(pagination)) {
98   - if (!footerEl) {
99   - footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
100   - } else {
101   - const offsetHeight = footerEl.offsetHeight;
102   - footerHeight += offsetHeight || 0;
  98 + let footerHeight = 0;
  99 + if (!isBoolean(pagination)) {
  100 + if (!footerEl) {
  101 + footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
  102 + } else {
  103 + const offsetHeight = footerEl.offsetHeight;
  104 + footerHeight += offsetHeight || 0;
  105 + }
103 106 }
104   - }
105 107  
106   - let headerHeight = 0;
107   - if (headEl) {
108   - headerHeight = (headEl as HTMLElement).offsetHeight;
109   - }
  108 + let headerHeight = 0;
  109 + if (headEl) {
  110 + headerHeight = (headEl as HTMLElement).offsetHeight;
  111 + }
110 112  
111   - let height =
112   - bottomIncludeBody -
113   - (resizeHeightOffset || 0) -
114   - paddingHeight -
115   - borderHeight -
116   - paginationHeight -
117   - footerHeight -
118   - headerHeight;
  113 + let height =
  114 + bottomIncludeBody -
  115 + (resizeHeightOffset || 0) -
  116 + paddingHeight -
  117 + borderHeight -
  118 + paginationHeight -
  119 + footerHeight -
  120 + headerHeight;
119 121  
120   - height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
121   - setHeight(height);
  122 + height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
  123 + setHeight(height);
122 124  
123   - if (!bodyEl) {
124   - bodyEl = tableEl.querySelector('.ant-table-body');
125   - }
126   - bodyEl!.style.height = `${height}px`;
  125 + if (!bodyEl) {
  126 + bodyEl = tableEl.querySelector('.ant-table-body');
  127 + }
  128 + bodyEl!.style.height = `${height}px`;
  129 + }, 200);
127 130 }
128 131  
129 132 useWindowSizeFn(calcTableHeight, 200);
... ...