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
src/components/Page/src/PageWrapper.vue
| ... | ... | @@ -96,7 +96,6 @@ |
| 96 | 96 | ...contentStyle, |
| 97 | 97 | minHeight: height, |
| 98 | 98 | ...(fixedHeight ? { height } : {}), |
| 99 | - paddingBottom: `${unref(footerHeight)}px`, | |
| 100 | 99 | }; |
| 101 | 100 | }); |
| 102 | 101 | |
| ... | ... | @@ -166,7 +165,36 @@ |
| 166 | 165 | const contentMarginTop = Number(marginTop.replace(/[^\d]/g, '')); |
| 167 | 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 | 200 | return { | ... | ... |
src/layouts/default/footer/index.vue