Comment implémenter la fonction de hook monté dans Vue pour obtenir la hauteur du nœud

Cette fois, je vais vous montrer comment implémenter la fonction hook monté dans Vue pour obtenir la hauteur du nœud. Quelles sont les précautions pour implémenter la fonction hook monté dans Vue pour obtenir la hauteur du nœud. est un cas pratique. Jetons un coup d'œil.

Problèmes rencontrés

Je développe récemment un projet Vue Plusieurs pages utilisent un composant coulissant de fond de page, je l'ai donc directement empaqueté dans un , mais j'ai rencontré un bug, c'est-à-dire que je dois obtenir le offsetTop de ce composant, puis lorsque la page défile jusqu'à cette position, définir l'attribut position sur fix pour le corriger à l'écran. Le problème est que lorsque j'obtiens le offsetTop dans la fonction hook montée, j'obtiendrai le mauvais offsetTop lorsque j'ouvrirai la page dans un nouvel onglet, mais lorsque j'actualiserai la page en cours, il n'y aura aucun problème.

Problème de positionnement

Le problème a été détecté plus tard, il s'agissait d'un problème de chargement. Une nouvelle fenêtre s'est ouverte Image La valeur par défaut n'est pas mise en cache. L'image est La requête GET est asynchrone et js doit s'exécuter plus rapidement que l'image GET, donc lorsque la fonction hook montée est exécutée, l'image n'a pas été complètement chargée et un offsetTop incorrect sera obtenu.

Solution

Ajoutez l'attribut ref à l'image et écrivez-le dans la fonction hook montée dans ce composant,

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

ici Bus utilise EventBus , la méthode de réponse aux événements dans les deux composants. Si vous ne comprenez pas ou êtes intéressé, vous pouvez cliquer ici EventBus.
Dans les composants qui doivent être offsetTop

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de Node.js Buffer

Comment créer un environnement de développement webpack+react

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!