Vue 通过组件的ref获取元素的高度。
在Vue中，可以通过ref属性来引用DOM元素，然后在组件的mounted生命周期钩子中获取该元素的高度。以下是一个简单的示例：
<template>
<div>
<div ref="myElement">这是一个需要获取高度的元素</div>
<p>元素的高度是：{{ elementHeight }}px</p>
</div>
</template>
<script>
export default {
data() {
return {
elementHeight: 0
};
},
mounted() {
this.$nextTick(() => {
// DOM已经渲染完毕
this.elementHeight = this.$refs.myElement.offsetHeight;
});
}
};
</script>在这个例子中，我们有一个<div>元素，它通过ref="myElement"被引用。在组件的mounted生命周期钩子中，我们使用this.$refs.myElement.offsetHeight来获取元素的高度，并将其赋值给elementHeight数据属性。注意，我们通常在this.$nextTick的回调函数中访问ref，以确保DOM已经完成更新。
评论已关闭