Vue 3获取DOM元素的大小以及相对于视口的位置的getBoundingClientRect属性




<template>
  <div ref="boxRef" class="box">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const boxRef = ref(null);
const boxRect = ref(null);
 
onMounted(() => {
  if (boxRef.value) {
    boxRect.value = boxRef.value.getBoundingClientRect();
    // 执行需要的操作，例如使用boxRect.value的数据
  }
});
</script>
 
<style>
.box {
  /* 样式 */
}
</style>

这段代码使用了Vue 3的Composition API（setup函数）来获取DOM元素的尺寸和相对于视口的位置。它首先定义了一个ref变量boxRef来引用DOM元素，然后在onMounted生命周期钩子中，通过访问boxRef.value.getBoundingClientRect()获取元素的布局信息，并将结果存储在boxRect.value中。这样就可以在组件挂载后获取并使用元素的尺寸信息。

Vue 3获取DOM元素的大小以及相对于视口的位置的getBoundingClientRect属性

评论已关闭

推荐阅读