javascript - So ermitteln Sie die Höhe der Komponente selbst in Vue

Question

Um eine Popup-Box mit variabler Höhe zu erstellen, muss sie am unteren oder oberen Rand positioniert werden. Da der Inhalt jedoch variabel ist, muss die Höhe berechnet werden, damit sie angezeigt wird Ob es nach oben oder unten springt, wie erhalte ich derzeit seine Höhe in der Komponente? Mein aktueller Ansatz besteht darin, classname in created() zu verwenden, um den p der Komponente zu erhalten Da sich der Anfangswert jedoch in data() befindet, wird die Höhe der Komponente standardmäßig auf 0 gesetzt und die Höhe in data() in created, erhält aber kein p
created()中使用classname得到组件的p但由于初始在data()中将组件高度默认了0,
在created中改变data()created() {

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

Das Druckergebnis „curHeight“ ist undefiniert, bitte finden Sie eine Lösung

Answer 1

element.offsetHeight
// 在vue中请使用ref获取真实DOM
// 在mounted钩子中调用，该钩子是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

created勾子 dom节点还没有插入进页面吧，需要在mounted勾子函数中调用
而且获取到元素的高度，是用dom.clientHeight吧，或者dom.getBoundingClientRect().height吧

Answer 4

@林小新 由于我在调用时，使用了v-if所以每次设为true它才会创建，所以可以放在created中，但你这样也让我知道了nextTick这个东西，没用过，但先按你的试试。
目前暂由于最外层p是没有高度的，只能通过取子p的高度累加成为它的高度，这种做法只是折中解决，可能是我写组件时没有考虑到这些。

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;
      });
      });
          

如果没有更好答案，我会采纳你的

Answer 5

获取实际的大小 .clientWidth和.clientHeight
并没有.height这种获取方法，所以才undefined