【Vue3】vue3通过ref获取元素离顶部的距离

vue3通过ref获取元素离顶部的距离

vue3版本 ^3.2.45

• [ref].value.$el.getBoundingClientRect().top
  • 通过ref获取元素。
  • 使用 getBoundingClientRect().top 获取离顶部的距离

homeView.vue

<div ref="mTab" >........</div>
<script>
import {
      
       ref } from 'vue';

export default {
      
      
  name: 'home',
  setup() {
      
      
    const mTab = ref(null)

//....

  console.log(mTab.value.$el.getBoundingClientRect().top);


  //.....
    return {
      
      
      mTab,
    };
  },
}
</script>

---

效果图