1、在vue3中通过ref=“myDiv”在onMounted获取高度时候出现高度不一致放在nextTick也不行

例如:

onMounted(()=>{
      nextTick(()=>{
      console.log(myDiv.value)
      console.log(myDiv.value.offsetHeight)
      table.divHeight = myDiv.value.offsetHeight - 300
  })
})

在第一个整体输出里的offsetHeight和第二个输出不一致,估计原因是vue3在初始化的时候渲染问题。

2、在div上面加一个key=“index” 在onMounted里面增长强制div更新还是不行,
用v-if通过销毁重新加载组件又会导致mydiv获取不到数据。
也看见有其他的博主用定时器处理感觉效果都不是太好。
解决:
比如我要通过最外面的div计算列表高度,可以先设置一个固定值

  table.divHeight=300
  nextTick(()=>{
    console.log(myDiv.value.offsetHeight)
      table.divHeight = myDiv.value.offsetHeight - 300
  })

我先预设了table列表的高度,nextTick就能够生效获取到外面div的实际高度。

目前问题:在window.onresize测试过程中窗口放大有用,缩小又获取不到外层DIV正确的真实高度了。

尽量用document.body.clientHeight高度作为高度自适应,它在onresize事件基本上都能捕获正确高度,如果监视div很容易出问题。
参考文章:vue3中onMounted获取元素高度不准确

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐