vue获取元素offsetTop,mounted获取不到offsetTop,获取元素距离页面顶边距离
通过官方的这张图片知道beforeUpdate阶段一定是mounted已经执行结束,在这个阶段能够正常获取到dom,如果没有触发beforeUpdate在data里加一个值手动修改触发。记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取offsetTop来实现。随后用老办法获取距离顶边的距离然后存到vuex中来实现
·
记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取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中来实现跨多级组件传递
更多推荐
所有评论(0)