Commit ab2c7efe6994dacfe0ff407783f2c3b246427bfc
Committed by
GitHub
GitHub
1 parent
655b7432
perf(PageWrapper): fix the height calculation problem when footer and global foo…
…ter are opened at the same time (#760) * perf(PageWrapper): 优化PageWrapper在page的footer与全局页脚同时开启时的高度计算表现。 * docs(PageWrapper): 修复footer与全局页脚同时开启时的高度计算问题 Co-authored-by: NorthLan <lan6995@gmail.com>
Showing
3 changed files
with
32 additions
and
3 deletions
CHANGELOG.zh_CN.md
| @@ -18,6 +18,7 @@ | @@ -18,6 +18,7 @@ | ||
| 18 | - **PageWrapper** 修复高度计算问题 | 18 | - **PageWrapper** 修复高度计算问题 |
| 19 | - **FlowChart** 修复拖放菜单丢失 | 19 | - **FlowChart** 修复拖放菜单丢失 |
| 20 | - 修复后台模式下，Iframe 路由错误 | 20 | - 修复后台模式下，Iframe 路由错误 |
| 21 | +- **PageWrapper** 修复 footer 与全局页脚同时开启时的高度计算问题 | ||
| 21 | 22 | ||
| 22 | ## 2.4.2(2021-06-10) | 23 | ## 2.4.2(2021-06-10) |
| 23 | 24 |
src/components/Page/src/PageWrapper.vue
| @@ -96,7 +96,6 @@ | @@ -96,7 +96,6 @@ | ||
| 96 | ...contentStyle, | 96 | ...contentStyle, |
| 97 | minHeight: height, | 97 | minHeight: height, |
| 98 | ...(fixedHeight ? { height } : {}), | 98 | ...(fixedHeight ? { height } : {}), |
| 99 | - paddingBottom: `${unref(footerHeight)}px`, | ||
| 100 | }; | 99 | }; |
| 101 | }); | 100 | }); |
| 102 | 101 | ||
| @@ -166,7 +165,36 @@ | @@ -166,7 +165,36 @@ | ||
| 166 | const contentMarginTop = Number(marginTop.replace(/[^\d]/g, '')); | 165 | const contentMarginTop = Number(marginTop.replace(/[^\d]/g, '')); |
| 167 | subtractHeight += contentMarginTop; | 166 | subtractHeight += contentMarginTop; |
| 168 | } | 167 | } |
| 169 | - setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight); | 168 | + |
| 169 | + // fix: wrapper marginTop and marginBottom value | ||
| 170 | + let wrapperSubtractHeight = 0; | ||
| 171 | + let wrapperMarginBottom = ZERO_PX; | ||
| 172 | + let wrapperMarginTop = ZERO_PX; | ||
| 173 | + const wrapperClassElments = document.querySelectorAll(`.${prefixVar}-page-wrapper`); | ||
| 174 | + if (wrapperClassElments && wrapperClassElments.length > 0) { | ||
| 175 | + const contentEl = wrapperClassElments[0]; | ||
| 176 | + const cssStyle = getComputedStyle(contentEl); | ||
| 177 | + wrapperMarginBottom = cssStyle?.marginBottom ?? ZERO_PX; | ||
| 178 | + wrapperMarginTop = cssStyle?.marginTop ?? ZERO_PX; | ||
| 179 | + } | ||
| 180 | + if (wrapperMarginBottom) { | ||
| 181 | + const contentMarginBottom = Number(wrapperMarginBottom.replace(/[^\d]/g, '')); | ||
| 182 | + wrapperSubtractHeight += contentMarginBottom; | ||
| 183 | + } | ||
| 184 | + if (wrapperMarginTop) { | ||
| 185 | + const contentMarginTop = Number(wrapperMarginTop.replace(/[^\d]/g, '')); | ||
| 186 | + wrapperSubtractHeight += contentMarginTop; | ||
| 187 | + } | ||
| 188 | + let height = | ||
| 189 | + unref(contentHeight) - | ||
| 190 | + unref(footerHeight) - | ||
| 191 | + headerHeight - | ||
| 192 | + subtractHeight - | ||
| 193 | + wrapperSubtractHeight; | ||
| 194 | + if (unref(getShowFooter)) { | ||
| 195 | + height -= unref(footerHeightRef); | ||
| 196 | + } | ||
| 197 | + setPageHeight?.(height); | ||
| 170 | } | 198 | } |
| 171 | 199 | ||
| 172 | return { | 200 | return { |
src/layouts/default/footer/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Footer :class="prefixCls" v-if="getShowLayoutFooter"> | 2 | + <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef"> |
| 3 | <div :class="`${prefixCls}__links`"> | 3 | <div :class="`${prefixCls}__links`"> |
| 4 | <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a> | 4 | <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a> |
| 5 | 5 |