element-ui之關(guān)于組件BackToTop回到頂部的使用
更新時間：2024年03月19日 09:38:00 作者：沏歡
這篇文章主要介紹了element-ui之關(guān)于組件BackToTop回到頂部的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element-ui組件BackToTop回到頂部的使用
詳細(xì)參數(shù)查看官網(wǎng)文檔BackToTop
方式1：直接添加使用
<div class="home"> <el-backtop></el-backtop> <div class='content'></div> </div>
方式2：添加target指定觸發(fā)的對象
<div class="layout"> <el-backtop target=".layout"></el-backtop> <div class='content'></div> </div>
注意：
1）使用時放在觸發(fā)滾動的對象里的第一個div的位置（即最前面）
2）還是無效時可以選擇給觸發(fā)滾動的對象添加以下樣式
.layout {
height: 100vh;/*注意，這里設(shè)了這個高度后，后期給window注冊onscorll事件時，注冊不上*/
overflow-x: hidden;
}
element回到頂部組件使用注意事項（Backtop 回到頂部）
官網(wǎng)里面這個Backtop 回到頂部組件使用寫的很簡單，就這樣
我們實際上使用這個組件，target對象是內(nèi)容滾動的外部容器，并且這個容器的高度是100%是撐滿整個屏幕的
寫了個具體demo
例子如下：
<template>
<!-- 外部容器 -->
<div class="back-top-container">
<!-- 實際滾動內(nèi)容 -->
<div v-for="(item,i) in 150" :key="i">這是文本{{ i }}</div>
<!-- Backtop 回到頂部組件 -->
<el-backtop target=".back-top-container" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
margin-right:100px;
}"
>
UP
</div>
</el-backtop>
</div>
</template>
<style lang="scss" scoped>
.back-top-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
</style>
效果圖
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 3.0 中 jsx 語法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue自定義驗證之日期時間選擇器詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章介紹了vue實現(xiàn)消息無縫滾動效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage
這篇文章主要介紹了vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解vue3+element-plus實現(xiàn)動態(tài)菜單和動態(tài)路由動態(tài)按鈕(前后端分離)
本文需要使用axios,路由,pinia,安裝element-plus,并且本文vue3是基于js而非ts的,這些環(huán)境如何搭建不做描述,需要讀者自己完成,感興趣的朋友跟隨小編一起看看吧2023-11-11
Upload?上傳文件這個功能是我們在企業(yè)實際開發(fā)當(dāng)中使用頻率是非常高的這樣一個文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了使用table做成樹形結(jié)構(gòu)的table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了vue實現(xiàn)At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02