vue3setup语法糖如何获取dom元素到页面顶端的距离

在 Vue 3 中，可以使用 `ref` 创建一个响应式的 DOM 引用，并使用 `setup()` 函数来获取该引用的实际 DOM 元素。然后，可以使用该 DOM 元素的 `offsetTop` 属性来获取该元素到页面顶端的距离。

以下是一个示例代码：

<template>
  <div ref="myElement">My Element</div>
</template>

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

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

    onMounted(() => {
      const distanceToTop = myElement.value.offsetTop
      console.log(`Distance to top: ${distanceToTop}px`)
    })

    return {
      myElement
    }
  }
}
</script>

在此示例中，我们创建了一个名为 `myElement` 的 `ref`，并在 `onMounted()` 钩子函数中获取了该元素的 `offsetTop` 属性。在返回的对象中，我们将 `myElement` 属性暴露给模板，以便在模板中使用 `ref` 引用该元素。