快捷導(dǎo)航

vue3如何通過(guò)ref獲取元素離頂部的距離

更新時(shí)間：2023年10月27日 09:30:18 作者：視覺(jué)CG

這篇文章主要給大家介紹了關(guān)于vue3如何通過(guò)ref獲取元素離頂部的距離,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue3版本 ^3.2.45

[ref].value.$el.getBoundingClientRect().top
- 通過(guò)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 創(chuàng)建一個(gè)對(duì)元素的引用，并使用 window.scrollY 獲取視口的滾動(dòng)高度，從而計(jì)算元素到視口頂部的距離。

首先，你需要在組件中使用 ref 創(chuàng)建一個(gè)對(duì)元素的引用。例如，你可以在 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>

總結(jié)

到此這篇關(guān)于vue3如何通過(guò)ref獲取元素離頂部的距離的文章就介紹到這了,更多相關(guān)vue3獲取元素離頂部距離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3結(jié)合SpringBoot打造一個(gè)高效Web實(shí)時(shí)消息推送系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合SpringBoot打造一個(gè)高效Web實(shí)時(shí)消息推送系統(tǒng),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2025-07-07
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),
2023-10-10
詳解如何創(chuàng)建基于vite的vue項(xiàng)目
vite 這個(gè)是尤大開(kāi)發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue文件使用iconfont解析
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue中對(duì)時(shí)間戳的處理方式
這篇文章主要介紹了vue中對(duì)時(shí)間戳的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
Vue2 添加數(shù)據(jù)可視化支持的方法步驟
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
詳解vue移動(dòng)端日期選擇組件
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來(lái)幫助，一起學(xué)習(xí)參考下。
2018-02-02
vue 注冊(cè)組件的使用詳解
Vue.js的組件的使用有3個(gè)步驟：創(chuàng)建組件構(gòu)造器、注冊(cè)組件和使用組件。這篇文章主要介紹了vue 注冊(cè)組件的使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
詳解vue 項(xiàng)目白屏解決方案
這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案，詳細(xì)的介紹了白屏的解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10