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

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

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

解决：通过beforeUpdate阶段获取

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

beforeUpdate() {var distance = 0var el_now = this.$refs.commentwhile (el_now.offsetParent) {distance += el_now.offsetTopel_now = el_now.offsetParent}this.$store.state.comment_offsetTop = distance
}

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

vue获取元素offsetTop，mounted获取不到offsetTop，获取元素距离页面顶边距离相关推荐

vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
如何使用jquery获取 (滚动条)距离(页面底部)的距离
为什么80%的码农都做不了架构师?>>> if($(document).height()-$(document).scrollTop()<1200){ //当整个页面do ...
vue 在v-for列表动态添加ref，并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
Redis中列表list数据类型（增加（在左侧、右侧或指定元素前后插入数据）、获取（获取表内指定范围的元素）、更新（获取指定索引位置的元素值）、删除（删除指定元素、count））
列表的元素类型为string 按照插⼊顺序排序 1. 增加 1.1 在左侧插⼊数据 lpush key value1 value2 ... 例1:从键为a1的列表左侧加⼊数据a . b .c lpus ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
java链表的数据结构_Java数据结构获取链表(LinkedList)的第一个和最后一个元素
Java数据结构获取链表(LinkedList)的第一个和最后一个元素以下实例演示了如何使用 LinkedList 类的 linkedlistname.getFirst() 和 linkedlis ...
获取数组中元素值为偶数的累加和与元素值为奇数的累加和，并计算他们之间的差值
/*** 1.获取数组中元素值为偶数的累加和与元素值为奇数的累加和,并计算他们之间的差值* 1.定义int getNum(int[] arr)静态方法,该方法要求完成* 1.1 获取指定数组arr中元 ...

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

vue获取元素offsetTop，mounted获取不到offsetTop，获取元素距离页面顶边距离相关推荐

最新文章

热门文章