vue3 如何获取dom元素的offsetTop

Question

问题遇到的现象和发生背景

PC端 页面实现点击a标题,滚动到指定的位置

问题相关代码，请勿粘贴截图

点击滚动到指定位置

vue3 在setup（）{ const helpall = ref(null); console.log( helpall.value.offsetTop ) 打印出来的是undefined return {helpall } }

运行结果及报错内容

console.log( helpall.value.offsetTop ) 打印出来的是undefined

我想要达到的结果

想要获取 dom元素的 offsetTop

Answer 1

获取页面dom元素 需要在页面挂载完成后去操作

<template>
  <div class="about">
    <h1 ref="helpall">This is an Vue3 page</h1>
  </div>  
</template>

<script>
import {
  ref,
  onMounted
} from 'vue';
export default {
  name: 'dashboard',
  setup() {
    const helpall = ref(null)

    onMounted(() => {
      console.log('offsetTop', helpall.value.offsetTop);
    })
    return {
      helpall
    }
  }
}
</script>

<style lang="scss" scoped>
.about {
  padding-top: 30px;
  text-align: center;
  color: #2c3e50;
}
</style>

运行结果