vue3 获取元素高度

// 在 Vue 3 中获取元素高度的示例代码

<template>
  <div ref="myElement" class="my-element">
    这是一个需要获取高度的元素
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 来引用 DOM 元素
    const myElement = ref(null);
    const elementHeight = ref(0);

    // 当组件挂载后，获取元素的高度
    onMounted(() => {
      if (myElement.value) {
        elementHeight.value = myElement.value.offsetHeight;
        console.log('元素高度:', elementHeight.value);
      }
    });

    return {
      myElement,
      elementHeight,
    };
  },
};
</script>

<style scoped>
.my-element {
  height: 100px; /* 示例高度 */
  background-color: lightblue;
}
</style>

解释说明：

1. 模板部分：我们使用 ref 属性将一个 DOM 元素绑定到 myElement 变量上。
2. 脚本部分：
   • 使用 ref 创建了一个响应式的 myElement 引用来存储 DOM 元素。
   • 使用 onMounted 生命周期钩子，在组件挂载后获取元素的高度，并将其赋值给 elementHeight。
3. 样式部分：为 .my-element 添加了一些样式，以便更容易看到效果。

通过这种方式，你可以在 Vue 3 中轻松获取 DOM 元素的高度。