vue.js 获取dom位置

<template>
  <div>
    <button @click="getElementPosition">获取位置</button>
    <div ref="myElement" style="margin-top: 100px;">这是一个元素</div>
  </div>
</template>

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

export default {
  setup() {
    const myElement = ref(null);

    function getElementPosition() {
      if (myElement.value) {
        const rect = myElement.value.getBoundingClientRect();
        console.log('元素位置:', rect);
        console.log('左上角坐标:', rect.left, rect.top);
        console.log('右下角坐标:', rect.right, rect.bottom);
      }
    }

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

import { nextTick } from 'vue';

nextTick(() => {
  // DOM更新后的操作
  const rect = myElement.value.getBoundingClientRect();
  console.log(rect);
});