如何使用Vue获取div的高度
如何使用Vue获取div的高度
提问于 2020-04-08 01:38:42
我的情况如下:我需要查找DIV组件的高度，以动态通知子组件其大小。
我试图创建一个手动加载模式，但由于某些原因，捕获的高度小于正常高度。
它捕获的大小是318px，但正确的高度应该是393px。
最奇怪的是，当我改变查找高度的方法，在clientHeight和offsetHeight之间切换时，自动加载显示div获得了正确的高度，但如果我更新页面(F5)，高度就会出错，然后继续出错。
Vue代码
export default {
data() {
return {
height: 0,
loading: false
};
},
mounted() {
this.height = this.$refs.infoBox.clientHeight;
}
}HTML代码
<div class="bg-white shadow-md rounded max-w-xs mx-auto" id="info-box" ref="infoBox">
<div class="absolute max-w-xs w-full overflow-auto bg-white opacity-50" :style="{ height: height + 'px'}" v-if="loading"></div>
...
</div>我希望我已经设法解释了这个问题。提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-08 03:52:53
每当您像这样从DOM获取信息时，使用computed属性是很有好处的：
computed: {
height () {
return this.$refs.infoBox.clientHeight
}
}这样，Vue就会轮询这个变量的变化，并且它会随着DOM的更新而更新。在mounted中设置一次的问题是，这种情况显然不会发生。除此之外，你抓住它的方式是正确的。如果它是在CSS中设置的硬编码高度，您也可以从style对象中获取它，但这不是一个好主意。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61086058
复制相关文章
相似问题
腾讯云开发者
