当前位置: 首页 > Web前端 > vue.js

[Vue]挂载钩子函数获取节点高-宽错误

时间:2023-03-31 19:51:52 vue.js

场景一:涉及到异步请求问题:如果图片是异步GET请求,js必须比图片GET运行得更快,所以当挂载钩子函数是执行,图片还没有完全加载,这时候会得到一个错误的偏移值解决方法:(监听图片加载完成事件)给图片添加ref属性,在那个组件的挂载钩子函数中写入,this.$refs.img.onload=()=>{Bus.$emit('loadImgSuccess')}这里的Bus就是EventBus,是两个组件中事件响应的方法。在需要获取offsetTop的组件中写这个,Bus.$on('loadImgSuccess',()=>{varoffsetTop=this.$refs.dom.offsetTop})这个时候可以确认页面是否是新建的打开或者当前Page刷新都能得到正确的偏移值。场景二:使用v-if问题:可以检测html中是否使用了v-if,因为如果默认值为false,那么部分dom还没有被渲染,当然得不到解决方法:更改v-if到v-show,那么就可以拿到dom了,因为v-show会渲染dom,只是为了控制显示器的显示。场景三:默认方案:setTimeout异步获取mounted(){setTimeout(()=>{//是否显示左右进度条this.updateNavScroll();},500);