Solve Vue MOUNTED hook functions Get Node High Error


Recently developed a Vue project, several pages are used to slide the components on a page floor, I will directly encapsulate one, but encounter To a bug, I need to get the OFFSETTOP of this component, and then the page is scrolling to this position, set the position property to fix, so that he is fixed on the screen. The problem is that when I get offsettop in the MOUNTED hook function, open the page in the newly opened tab, get the wrong offsettop, but there will be no problem in the current page refresh.

Later, the problem is to load, the new window opens the picture, the default is no cache, the picture is a get request, Asynchronous, JS runs will definitely be fast than the picture get, so when the MOUNTED hook function is executed, the picture is not fully loaded, and it will get a wrong OFFSettop at this time.

Give the picture plus the REF attribute, and written in the moused hook function in that component,

 this. $ refs.img.onload = () => {Bus. $ emit ( 'loadImgSuccess')}   
Bus here is Eventbus, the event response in two components, you don’t understand or interested, you can click here.

Need to get OFFSettop components

BUS. $ ON (‘loadimgsuccess “, () => {var Offsettop = this. $ Refs.dom.offSettop}
 At this time, it can beRecognize that the new open button or the current page refresh can get the correct OFFSETTOP.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment