javascript - Comment obtenir la hauteur du composant lui-même dans Vue

Question

Pour créer une boîte pop-up à hauteur variable, elle doit être positionnée. La boîte pop-up peut apparaître en bas ou en tête, mais comme le contenu est variable, sa hauteur doit être calculée pour s'afficher. qu'il apparaisse vers le haut ou vers le bas. , actuellement comment obtenir sa hauteur dans le composant
Mon approche actuelle consiste à utiliser classname dans created() pour obtenir le p du composant. Cependant, puisque la valeur initiale est dans data( ), la hauteur par défaut du composant est 0 et modifie la hauteur dans data() dans created, mais n'obtient pas pcreated()中使用classname得到组件的p但由于初始在data()中将组件高度默认了0,
在created中改变data()

créé() {

let cur = document.querySelectorAll("p[class='Pop-Over']");
console.log(cur);
let curHeight = cur.height;
console.log(curHeight);
}

Le résultat d'impression curHeight n'est pas défini, veuillez trouver une solution

Answer 1

element.offsetHeight
// Dans vue, veuillez utiliser ref pour obtenir le vrai DOM
// Appelé dans le hook monté, qui est déclenché après le rendu du DOM

Answer 2

mounted () {
    this.$nextTick(() => {
        let cur = document.querySelectorAll("p[class='Pop-Over']");
        console.log(cur);
        let curHeight = cur.height;
        console.log(curHeight);
    })
}

Answer 3

hook créé Le nœud dom n'a pas encore été inséré dans la page. Il doit être appelé dans la fonction hook montée
Et pour obtenir la hauteur de l'élément, utilisez dom.clientHeight ou dom.getBoundingClientRect().height

Answer 4

@林小新 Depuis que j'ai utilisé v-if lors de l'appel, il sera créé à chaque fois qu'il est défini sur true, il peut donc être placé dans create, mais vous me faites également part de nextTick, je ne l'ai jamais utilisé, mais essayez d'abord. c'est à votre façon.
Actuellement, comme la couche la plus externe p n'a pas de hauteur, elle ne peut être obtenue qu'en ajoutant les hauteurs du sous-p pour devenir sa hauteur. Cette approche n'est qu'une solution de compromis. Peut-être que je n'en ai pas pris en compte lors de l'écriture du. composant.

this.$nextTick(() => {

      let cur = document.querySelectorAll("p[class='Pop-Over']");

// console.log(cur);

      let curHeight = 0;
      cur[0].childNodes.forEach(function (item, index, array) {

// console.log(typeof item.clientHeight);

        curHeight += (typeof item.clientHeight) === 'number' ? item.clientHeight : 0;
      });
      });
          

S'il n'y a pas de meilleure réponse, j'accepterai la vôtre

Answer 5

Obtenez la taille réelle .clientWidth et .clientHeight
Il n'existe pas de méthode d'acquisition comme .height, ils ne sont donc pas définis