当前位置:首页 > 编程教程 > vue技术文章 > 解决Vue中mounted钩子函数获取节点高度出错问题

分享Vue中mounted钩子函数获取节点高度出错解决方案

  • 发布时间:
  • 作者:码农之家
  • 点击:194

这篇文章主要知识点是关于Vue、mounted、钩子函数、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

前端工程师必备技能:Vue移动开发实战技巧
  • 类型:Vue实战大小:122 MB格式:PDF作者:李利德
立即下载

解决Vue中mounted钩子函数获取节点高度出错问题

遇到的问题

最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题。

定位问题

后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是GET请求,是异步的,js运行的肯定比图片GET要快,所以当执行mounted钩子函数的时候,图片还没有全部加载完,这时候就会得到一个错误的offsetTop。

解决方案

给图片加上ref属性,并在那个组件里的mounted钩子函数中写,

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

这里的Bus是用的EventBus,两个组件中事件响应的办法,不懂或者感兴趣的可以点这里EventBus。
需要得到offsetTop的组件里面

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

这时候就可以确认每次不管是页面新打开还是当前页刷新都可以得到正确的offsetTop。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.489866

解决vue2 在mounted函数无法获取prop中的变量问题

如下所示; props: { example: { type: Object, default() { }, },},watch: { example: function(newVal,oldVal){ // newVal 为改变后的值 // 继续要处理的事件 },}, 使用watch 替代 mounted。 通过watch属性来响应数据的变化,当数据改变时执行异步操作。 总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.256289

Vue实例中生命周期created和mounted的区别详解

前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。 再上图,对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区别 每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer)……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com