vue子组件更新如何判断父组件的高度?

RainLucky
  • 392

如题,场景,在父页面index里有header,footer,content是个选项卡加router-view

<template>
<wheader/>
<wtab-panel>
<router-view/>
<wfooter/>
</template>

当content内容比较少,一屏都不到时设置footer为absolute,当超出一屏生成滚动条时footer设置为relative。
方案:
1.在wfooter组件里在router.beforeEach中获取content高度,判断该高度是否大于当前屏幕高度来动态设定footer的position。
问题:
当网速较慢时,渲染还未完成就已经取值,得到的值不准确导致页面最终footer遮挡到内容。
采用的解决方法:
1.setTimeout,150对于网速较差还是无法解决

回复
阅读 318
4 个回答
<template>
 <wheader/>
 <wtab-panel>
 <div class="main">
  <router-view/>
 </div>
 <wfooter/>
</template>

如楼上@古月 所说,我们一般使用min-height解决这个问题,而不是position。

如果wheader组件的高度为50px;wtab-panel组件的高度为30px:

.main{
 min-height:calc(100vh - 80px)
}

感觉给content设置min-height 就能解决你的问题

如果是vue3的话可以了解下suspense,如果不是的话,可以在content里面的异步内容resolve的时候派发一个事件,然后在footer里面的组件监听到相关事件后最近行重新布局

看下 MutationObserver能不能解决你的问题
需要考虑一定的性能消耗问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏