Vue3 封裝回到頂部組件的實(shí)現(xiàn)示例
更新時(shí)間：2022年03月17日 10:35:37 作者：柒個(gè)M
回到頂部在很多網(wǎng)頁中都可以見到，本文主要介紹了Vue3 封裝回到頂部組件的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們?cè)诰W(wǎng)頁中應(yīng)該經(jīng)常可以看到回到頂部這個(gè)功能,這個(gè)功能也比較簡(jiǎn)單。
代碼：
<template>
<div class="page-content-scroll">
<el-backtop
target=".page-content-scroll"
>
</el-backtop>
<slot></slot>
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped lang="scss">
.page-content-scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
}
</style>
使用：
<template>
<back-top>
<router-view/>
</back-top>
</template>
<style lang="scss">
</style>
<template>
<div>
<h1>{{ name }}</h1>
<div id="panels"></div>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const name: string = ref('Lisa')
onMounted(() => {
const fragmentArr = document.createDocumentFragment()
const parentNode = document.getElementById('panels')
for (let i = 0; i < 200; i++) {
const elementP = document.createElement('p')
elementP.innerText = '測(cè)試' + i
fragmentArr.appendChild(elementP)
}
parentNode.appendChild(fragmentArr)
})
</script>
<style scoped>
</style>
到此這篇關(guān)于Vue3 封裝回到頂部組件的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue3 回到頂部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對(duì)比時(shí)辨識(shí)VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06
最近做項(xiàng)目遇到一個(gè)需求，需要制作一個(gè)定制化的日歷組件，本文主要介紹了從零寫vue日歷組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue實(shí)現(xiàn)購物車實(shí)例代碼兩則
這篇文章主要介紹了Vue實(shí)現(xiàn)購物車實(shí)例代碼,需要的朋友可以參考下2020-05-05
vue style屬性設(shè)置背景圖片的相對(duì)路徑無效的解決
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對(duì)路徑無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue開發(fā)之不同瀏覽器的類型判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue通過provide inject實(shí)現(xiàn)組件通信
這篇文章主要介紹了Vue通過provide inject實(shí)現(xiàn)組件通信,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
vue引入微信sdk 實(shí)現(xiàn)分享朋友圈獲取地理位置功能
這篇文章主要介紹了h5 vue引入微信sdk 實(shí)現(xiàn)分享朋友圈，分享給朋友，獲取地理位置功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
VsCode工具開發(fā)vue項(xiàng)目必裝插件清單(推薦!)
對(duì)于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項(xiàng)目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10