javascript - How to get the height of the component itself in vue

Question

Since we want to make a pop-up box with variable height, we need to position it. The pop-up box may pop up at the bottom or at the head. However, since the content is variable, its height needs to be calculated to show whether it pops up or to. Download, how to get its height in the component currently
My current approach is to use classname in created() to get the p of the component, but since the initial value is in In data(), the height of the component is set to 0 by default.
In created, the height in data() is changed, but p

is not obtained.

created() {

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

Print result curHeight is undefind, please find a solution

Answer 1

element.offsetHeight
// In vue, please use ref to get the real DOM
// Called in the mounted hook, which is triggered after the DOM is rendered

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 hook The dom node has not been inserted into the page yet. It needs to be called in the mounted hook function
And to get the height of the element, use dom.clientHeight, or dom.getBoundingClientRect().height

Answer 4

@林小信 Since I used v-if when calling, it will be created every time it is set to true, so it can be placed in created, but you also let me know about nextTick. I have never used it, but first Try it your way.
Currently, because the outermost layer p has no height, it can only be obtained by adding the heights of the sub-p’s to become its height. This approach is just a compromise. Maybe I didn’t take this into consideration when writing the component.

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

If there is no better answer, I will accept yours

Answer 5

Get the actual size .clientWidth and .clientHeight
There is no acquisition method like .height, so they are undefined