Vue3 获取盒子高度

要获取盒子的高度，你可以使用 Vue3 中的 ref 和 onMounted 钩子函数配合使用。以下是一个示例代码：

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const box = ref(null);

    onMounted(() => {
      // 在组件挂载后获取盒子高度
      const height = box.value.offsetHeight;
      console.log(height);
    });

    return {
      box
    };
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 200px;
  background-color: red;
}
</style>

在上面的代码中，我们使用 ref 创建了一个名为 box 的响应式引用。然后，在 onMounted 钩子函数中，我们通过 box.value 来访问 DOM 元素，并使用 offsetHeight 属性获取盒子的高度。最后，我们将盒子的高度打印到控制台中。

注意，为了获取盒子的高度，我们需要在组件挂载后才能访问 DOM 元素，所以我们使用了 onMounted 钩子函数。