Element Backtop回到頂部的具體使用
更新時間：2020年07月27日 10:36:49 作者：ForeverJPB.
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
組件— 回到頂部
基礎(chǔ)用法
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template>
自定義顯示內(nèi)容
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :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;
}"
>
UP
</div>
</el-backtop>
</template>
Attributes
Events
關(guān)于element-ui el-backtop返回頂部組件無效問題
el-backtop綁定的盒子，需要一個滾動樣式：overflow-y: scroll;
<template>
<div id="app">
<router-view />
// 綁定app盒子
<el-backtop target="#app" :visibility-height="100"></el-backtop>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<style>
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微軟雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
height: 100%;
/* 這里給app一個滾動效果 */
overflow-y: scroll;
}
</style>
到此這篇關(guān)于Element Backtop回到頂部的具體使用的文章就介紹到這了,更多相關(guān)Element Backtop回到頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue中的可拖拽寬度div的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
Vue中使用vue-count-to(數(shù)字滾動插件)詳細教程
這篇文章主要給大家介紹了關(guān)于Vue中使用vue-count-to(數(shù)字滾動插件)的相關(guān)資料,最近需要開發(fā)一個數(shù)字滾動效果,在網(wǎng)上找到一個關(guān)于vue-countTo的插件,覺得這個插件還不錯,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue組件開發(fā)props驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于Vue3中unref詳解與常見使用的相關(guān)資料,Vue3中的unref是一個實用工具,用于簡化訪問響應(yīng)式引用和普通值的過程,通過自動判斷類型,unref可以處理任何類型的值,從而使代碼更加簡潔和易讀,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要圍繞Vue的SPA單頁面設(shè)計展開。SPA(single page application):單一頁面應(yīng)用程序，有且只有一個完整的頁面，對vue router原理感興趣的朋友跟隨小編一起看看吧2018-10-10
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vue使用Prism實現(xiàn)頁面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
詳解Vue中$props、$attrs和$listeners的使用方法
本文主要介紹了Vue中$props、$attrs和$listeners的使用詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認證機制
本文主要介紹了Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認證機制,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01