记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取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中来实现跨多级组件传递

Logo

前往低代码交流专区

更多推荐