javascript - vue 如何获取组件自身高度
问题描述
由于要做一个可变化长高的弹出框,需要定位,弹出框可能在底部弹出也可能在头部弹出,但内容由于是可变的,需要计算它的高度来显示向上弹还是向下弹,目前在组件内如何得到他的高度目前我的做法是在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,求办法
问题解答
回答1:element.offsetHeight// 在vue中请使用ref获取真实DOM// 在mounted钩子中调用,该钩子是DOM渲染完之后触发的
回答2:mounted () { this.$nextTick(() => {let cur = document.querySelectorAll('p[class=’Pop-Over’]');console.log(cur);let curHeight = cur.height;console.log(curHeight); })}回答3:
created勾子 dom节点还没有插入进页面吧,需要在mounted勾子函数中调用而且获取到元素的高度,是用dom.clientHeight吧,或者dom.getBoundingClientRect().height吧
回答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; }); });
如果没有更好答案,我会采纳你的
回答5:获取实际的大小 .clientWidth和.clientHeight并没有.height这种获取方法,所以才undefined
相关文章:
1. javascript - hexo可以配置文章文件名为随机数么?2. javascript - app中集成轻量级富文本编辑器?3. html - 爬虫时出现“DNS lookup failed”,打开网页却没问题,这是什么情况?4. html5 - Android混合开发5. Java IO流-InputStream是抽象类,也能调方法?(如图)6. html5 - vue-cli 装好了 新建项目的好了,找不到项目是怎么回事?7. node.js - webpack 配置文件 运行出错8. python - 用urllib抓取网页上的下载链接,目标文件是xls形式,但发现抓下来的xls是空表,里面只有一句报错信息,求帮助。9. java - ajax成功到后台不知道为什么一直回调失败函数10. python3.x - python 中的maketrans在utf-8文件中该怎么使用

网公网安备