feat: 根据路由 meta 动态调整 footer 高度

This commit is contained in:
jxxghp
2025-03-10 08:15:24 +08:00
parent e1e8344764
commit 8236461c37
2 changed files with 15 additions and 9 deletions

View File

@@ -56,9 +56,18 @@ export default defineComponent({
),
)
// 👉 根据路由 meta 决定 footer 高度
const shouldShowFooter = !route.meta.hideFooter
// 👉 Footer
const footer = h('footer', { class: 'layout-footer' }, [
h('div', { class: 'footer-content-container' }, slots.footer?.()),
h(
'div',
{
class: ['footer-content-container', !shouldShowFooter && 'footer-content-container-noheight'],
},
slots.footer?.(),
),
])
// 👉 Overlay
@@ -69,9 +78,6 @@ export default defineComponent({
},
})
// 👉 修改:根据路由 meta 决定是否显示 footer
const shouldShowFooter = !route.meta.hideFooter
return h(
'div',
{
@@ -83,11 +89,7 @@ export default defineComponent({
scrollDistance.value && 'window-scrolled',
],
},
[
verticalNav,
h('div', { class: 'layout-content-wrapper' }, [navbar, main, shouldShowFooter && footer]),
layoutOverlay,
],
[verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
)
}
},

View File

@@ -65,6 +65,10 @@ body,
block-size: variables.$layout-vertical-nav-footer-height;
}
.footer-content-container-noheight {
block-size: 0px !important;
}
.layout-footer-sticky & {
position: sticky;
inset-block-end: 0;