element-ui之關于組件BackToTop回到頂部的使用
更新時間：2024年03月19日 09:38:00 作者：沏歡
這篇文章主要介紹了element-ui之關于組件BackToTop回到頂部的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element-ui組件BackToTop回到頂部的使用
詳細參數查看官網文檔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;/*注意，這里設了這個高度后，后期給window注冊onscorll事件時，注冊不上*/
overflow-x: hidden;
}
element回到頂部組件使用注意事項（Backtop 回到頂部）
官網里面這個Backtop 回到頂部組件使用寫的很簡單，就這樣
我們實際上使用這個組件，target對象是內容滾動的外部容器，并且這個容器的高度是100%是撐滿整個屏幕的
寫了個具體demo
例子如下：
<template>
<!-- 外部容器 -->
<div class="back-top-container">
<!-- 實際滾動內容 -->
<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>
效果圖
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vue的data為啥只能是函數原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue-router二級導航切換路由及高亮顯示的實現(xiàn)方法
這篇文章主要給大家介紹了關于vue-router二級導航切換路由及高亮顯示的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
本篇文章主要介紹了談談Vue.js——vue-resource全攻略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
el-upload http-request使用 多個文件上傳攜帶其他參數方式
這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue3+Element Plus 實現(xiàn)多表單校驗demo
表單校驗在日常的開發(fā)需求中是一種很常見的需求,通常在提交表單發(fā)起請求前校驗用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗,本文給大家介紹基于Vue3+Element Plus 實現(xiàn)多表單校驗demo,感興趣的朋友一起看看吧2024-06-06
俄羅斯方塊這個游戲相信大家都玩過,下面這篇文章主要給大家介紹了關于如何利用vue3實現(xiàn)一個俄羅斯方塊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件
最近在學習 react,在學習到使用 react 開發(fā) Calendar 組件的時候,突然聯(lián)想到使用 vue 進行 Calendar 功能的實現(xiàn),因為目前使用的技術棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件2024-05-05
這篇文章主要介紹了Vue.prototype詳解及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
如何使用yarn創(chuàng)建vite+vue3&&electron多端運行
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運行,本文分步驟給大家介紹的非常詳細，包括使用yarn創(chuàng)建vite+vue3項目會遇到哪些問題，感興趣的朋友跟隨小編一起看看吧2024-03-03
本篇文章主要介紹了vue 運用mock數據的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11