vue获取元素offsetTop,mounted获取不到offsetTop,获取元素距离页面顶边距离

2023-11-02

记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取offsetTop来实现,但是在mounted阶段是无论如何都获取不到offsetParent的,不管是$nextTick、setTimeout(f,0)都获取不到

原因:mounted并不代表渲染完全结束,mounted刚开始时组件被孤立,没有放到文档当中

解决:通过beforeUpdate阶段获取

 通过官方的这张图片知道beforeUpdate阶段一定是mounted已经执行结束,在这个阶段能够正常获取到dom,如果没有触发beforeUpdate在data里加一个值手动修改触发

beforeUpdate() {
    var distance = 0
    var el_now = this.$refs.comment
    while (el_now.offsetParent) {
        distance += el_now.offsetTop
        el_now = el_now.offsetParent
    }
    this.$store.state.comment_offsetTop = distance
}

随后用老办法获取距离顶边的距离然后存到vuex中来实现跨多级组件传递

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue获取元素offsetTop,mounted获取不到offsetTop,获取元素距离页面顶边距离 的相关文章

随机推荐