ノードの高さを取得するために Vue にマウントされたフック関数を実装する方法

今回は、ノードの高さを取得するために Vue にマウントされたフック関数を実装する方法と、ノードの高さを取得するために Vue にマウントされたフック関数を実装する際の注意事項について説明します。 以下は実践的なケースです。見てみましょう。

発生した問題

最近、いくつかのページでページフロアスライドコンポーネントを使用しているため、それを直接1つにパッケージ化しましたが、バグが発生しました。つまり、これを取得する必要があります。コンポーネントを選択し、ページがこの位置までスクロールしたら、

position 属性を fix に設定して画面上で固定したままにします。問題は、マウントされたフック関数で offsetTop を取得すると、新しいタブでページを開いたときに間違った offsetTop が取得されることですが、現在のページを更新すると問題はありません。

位置の問題

問題は後で見つかりました、それは読み込みの問題でした

新しいウィンドウが開きました画像、デフォルトではキャッシュされていません、画像は非同期のGETリクエストです、jsはより速く実行する必要があります。そのため、マウントされたフック関数が実行されると、画像が完全にロードされておらず、誤った offsetTop が取得されます。

解決策

画像にref属性を追加して、そのコンポーネントに実装されているフック関数に記述します

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

ここでのバスはEventBusであり、2つのコンポーネントのイベント応答のメソッドがわかりません。ご興味がございましたら、こちらの EventBus をクリックしてください。
offsetTop のコンポーネントを取得する必要があります

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Node.js Bufferの使用方法の詳細な説明

webpack+react開発環境の構築方法

以上がノードの高さを取得するために Vue にマウントされたフック関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。