解決Vue中mounted鉤子函數(shù)獲取節(jié)點高度出錯問題
更新時間：2018年05月18日 08:47:07 作者：ovensi
本篇文章給大家分享了如何解決Vue中mounted鉤子函數(shù)獲取節(jié)點高度出錯問題，對此有興趣的朋友可以參考學習下。
遇到的問題
最近在開發(fā)一個Vue的項目，好幾個頁面都有用到一個 頁面樓層滑動的組件，我就直接封裝成了一個，但是遇到一個bug，就是我需要得到這個組件的offsetTop，然后頁面滾動到這個位置的時候，就設置position屬性為fixed，讓他固定在屏幕上。問題是當我在mounted鉤子函數(shù)中獲取offsetTop的時候，在新開的頁簽中打開頁面，會得到錯誤的offsetTop，但是在當前頁面刷新，就不會有問題。
定位問題
后來查到問題，就是加載的問題，新窗口打開圖片，默認是沒有帶緩存的，圖片是GET請求，是異步的，js運行的肯定比圖片GET要快，所以當執(zhí)行mounted鉤子函數(shù)的時候，圖片還沒有全部加載完，這時候就會得到一個錯誤的offsetTop。
解決方案
給圖片加上ref屬性，并在那個組件里的mounted鉤子函數(shù)中寫，
this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}
這里的Bus是用的EventBus，兩個組件中事件響應的辦法，不懂或者感興趣的可以點這里EventBus。
需要得到offsetTop的組件里面
Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop
})
這時候就可以確認每次不管是頁面新打開還是當前頁刷新都可以得到正確的offsetTop。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡的不穩(wěn)定而斷開連接，webscoket不會出現(xiàn)異常，下面就一起進入文章看看吧2022-01-01
Electron相當于一個瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關于如何使用electron將vue項目打包成exe的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Vue響應式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue3保存屬性自動換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
webpack+vue-cli項目中引入外部非模塊格式js的方法
今天小編就為大家分享一篇webpack+vue-cli項目中引入外部非模塊格式js的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue項目打包步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue2的響應式中,存在著添加屬性、刪除屬性、以及通過下標修改數(shù)組,但頁面不會自動更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細的介紹一下Vue響應式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
本文主要介紹了淺談Vue組件及組件的注冊方法，詳細的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
在本篇文章里我們給大家分享了關于vue的v-if使用方法的相關知識點，有興趣的朋友們跟著學習下。2019-02-02