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

最新推荐文章于 2025-04-02 09:58:13 发布

视觉CG

最新推荐文章于 2025-04-02 09:58:13 发布

阅读量8k

点赞数 5

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43614372/article/details/128389027

版权

Vue3 专栏收录该内容

26 篇文章

订阅专栏

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>