怎樣實作Vue中mounted鉤子函數取得節點高度

這次為大家帶來怎樣實現Vue中mounted鉤子函數獲取節點高度，實現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 
})

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Node.js Buffer使用詳解

#應該如何建立webpack react開發環境

以上是怎樣實作Vue中mounted鉤子函數取得節點高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！