vue3 使用ref 获取 dom 元素的高度

在Vue 3中，您可以使用ref来获取DOM元素的引用，然后通过该引用访问元素的高度。以下是一个简单的示例：

<template>
  <div ref="boxRef" style="height: 100px;">
    <!-- 内容 -->
  </div>
  <button @click="logBoxHeight">获取盒子高度</button>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const boxRef = ref(null);
 
const logBoxHeight = () => {
  if (boxRef.value) {
    console.log(boxRef.value.offsetHeight); // 获取高度
  }
};
 
onMounted(() => {
  logBoxHeight(); // 组件挂载后获取一次高度
});
</script>

在这个例子中，我们定义了一个ref叫做boxRef，然后在模板中的div元素上通过ref属性将其绑定。在script setup标签中，我们定义了一个方法logBoxHeight，在这个方法中，我们通过boxRef.value.offsetHeight访问了元素的高度。最后，我们使用了onMounted生命周期钩子来确保在组件挂载后立即获取一次高度。