javascript - vue 如何获取组件自身高度-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - vue 如何获取组件自身高度

世界只因有你 2017-06-26 10:58:50

[JavaScript讨论组]

1670

由于要做一个可变化长高的弹出框，需要定位，弹出框可能在底部弹出也可能在头部弹出，但内容由于是可变的，需要计算它的高度来显示向上弹还是向下弹，目前在组件内如何得到他的高度
目前我的做法是在created()中使用classname得到组件的p但由于初始在data()中将组件高度默认了0,
在created中改变data()中的height,但得不到p

created() {

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

打印结果curHeight为undefind,求办法

世界只因有你

全部回复(5)

给我你的怀抱2017-06-26 11:00:50 5楼

element.offsetHeight
// 在vue中请使用ref获取真实DOM
// 在mounted钩子中调用，该钩子是DOM渲染完之后触发的

赞 +0

添加回复

曾经蜡笔没有小新2017-06-26 11:00:50 4楼

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

赞 +0

添加回复

欧阳克2017-06-26 11:00:50 3楼

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

赞 +0

添加回复

漂亮男人2017-06-26 11:00:50 2楼

@林小新由于我在调用时，使用了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;
      });
      });

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

赞 +0

添加回复

phpcn_u15822017-06-26 11:00:50 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>