javascript - How to get the height of the component itself in vue
世界只因有你
世界只因有你 2017-06-26 10:58:50
0
5
1246

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

世界只因有你
世界只因有你

reply all(5)
给我你的怀抱

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

曾经蜡笔没有小新
mounted () {
    this.$nextTick(() => {
        let cur = document.querySelectorAll("p[class='Pop-Over']");
        console.log(cur);
        let curHeight = cur.height;
        console.log(curHeight);
    })
}
学霸

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

漂亮男人

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

phpcn_u1582

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template