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