Vueにおけるmountedフック関数取得ノード高さエラー問題の解決

941 ワード

問題
最近Vueのプロジェクトを開発して、いくつかのページが1つのページのフロアにスライドするコンポーネントを使うことができて、私は直接1つにパッケージして、しかし1つのバグに出会って、私はこのコンポーネントのoffsetTopを得る必要があって、それからページがこの位置にスクロールする時、position属性をfixedに設定して、彼をスクリーンに固定させます.問題は、mountedフック関数でoffsetTopを取得すると、新しく開いたページチェックでページを開くと、誤ったoffsetTopが得られますが、現在のページのリフレッシュでは問題ありません.
位置決めの問題
後で問題を調べて、ロードの問題で、新しいウィンドウはピクチャを開けて、デフォルトはキャッシュを持っていないで、ピクチャはGET要求で、非同期で、jsはピクチャGETより運行するのがきっと速いので、mountedフック関数を実行する時、ピクチャはまだ全部ロードし終わっていないで、この時1つの誤ったoffsetTopを得ることができます.
ソリューション
画像にref属性を付けて、そのコンポーネントのmountedフック関数に書きます.

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}
ここのBusはEventBusで、2つのコンポーネントの中でイベントに応答する方法で、分からないか興味があるのはここでEventBusを注文することができます.offsetTopのコンポーネントを入手する必要があります

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})
このとき、ページが新しく開くたびに、現在のページがリフレッシュされるたびに、正しいoffsetTopが得られることを確認できます.