vue3获取div高度

<template>
  <div ref="myDiv" class="my-div">
    <!-- 这里是你的内容 -->
  </div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null);
    const divHeight = ref(0);

    onMounted(() => {
      if (myDiv.value) {
        divHeight.value = myDiv.value.clientHeight; // 获取div的高度
        console.log('Div高度:', divHeight.value);
      }
    });

    return {
      myDiv,
      divHeight,
    };
  },
};
</script>

<style>
.my-div {
  /* 你可以在这里定义样式 */
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 ref 绑定到一个 div 元素上，这样可以在 JavaScript 中引用它。

2. 脚本部分 (<script>):

   • 导入 Vue 的组合式 API 函数 ref 和 onMounted。
   • 创建一个 ref 变量 myDiv 来引用模板中的 div 元素。
   • 创建另一个 ref 变量 divHeight 来存储获取到的 div 高度。
   • 在 onMounted 生命周期钩子中，检查 myDiv.value 是否存在，并使用 clientHeight 属性获取 div 的高度，然后将其赋值给 divHeight。

3. 样式部分 (<style>):

   • 可以根据需要为 div 添加样式。

通过这种方式，你可以在组件挂载后获取 div 的高度并进行后续处理。