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

更新时间：2023年10月27日 09:30:18 作者：视觉CG

这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下

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>

效果图

vue3获取元素到视口顶部高度

在 Vue 3 中，你可以使用 ref 创建一个对元素的引用，并使用 window.scrollY 获取视口的滚动高度，从而计算元素到视口顶部的距离。

首先，你需要在组件中使用 ref 创建一个对元素的引用。例如，你可以在 mounted 钩子中获取元素的引用：

<template>
  <div ref="elementRef">Hello, world!</div>
</template>

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

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

    onMounted(() => {
      // 在组件挂载后获取元素的引用
      console.log(elementRef.value);
    });

    return {
      elementRef
    };
  }
};
</script>

总结

到此这篇关于vue3如何通过ref获取元素离顶部的距离的文章就介绍到这了,更多相关vue3获取元素离顶部距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于Echarts饼图图例太长的解决方案
这篇文章主要介绍了关于Echarts饼图图例太长的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue.js实现仿原生ios时间选择组件实例代码
本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
VUE3学习教程之全局组件和局部组件
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下
2022-01-01
vue中关于trigger的用法
这篇文章主要介绍了vue中关于trigger的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
解决vue项目运行npm run serve报错的问题
这篇文章主要介绍了解决vue项目运行npm run serve报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue收集依赖与触发依赖源码刨析
vue对依赖的管理使用的是发布订阅者模式，其中watcher扮演订阅者，Dep扮演发布者。所以dep中会有多个watcher，一个订阅者也可以有多个发布者(依赖)。总共三个过程：定义依赖、收集依赖、触发依赖。下面开始详细讲解三个过程
2022-10-10
vue cli3 配置proxy代理无效的解决
今天小编就为大家分享一篇vue cli3 配置proxy代理无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue小图标favicon不显示的解决方案
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Nuxt引用cookie-universal-nuxt在服务端请求cookie方式
这篇文章主要介绍了Nuxt引用cookie-universal-nuxt在服务端请求cookie方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10