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

Question

Puisque nous voulons créer une boîte contextuelle à hauteur variable, nous devons la positionner. La boîte contextuelle peut apparaître en bas ou en tête, mais comme le contenu est variable, sa hauteur doit être calculée pour. montrer s'il apparaît vers le haut ou vers le bas. Actuellement, comment puis-je obtenir sa hauteur dans un composant ? Mon approche actuelle consiste à l'utiliser dans create()...

给我你的怀抱 · Answer

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

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

欧阳克 · Answer

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

@林小新 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

phpcn_u1582 · Answer

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