Element Backtop回到頂部的具體使用
更新時間：2020年07月27日 10:36:49 作者：ForeverJPB.
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
組件— 回到頂部
基礎(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-cli3.x配置全局的scss的時候報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于數(shù)據(jù)綁定一個常見需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性，我們可以用 v-bind 處理它們，但是使用v-bind綁定class的時候我們要有一些注意事項，下面這篇文章就給大家分享了下要注意的方面，希望能對大家有所幫助，下面來一起看看吧。2016-12-12
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
利用nodeJS+vue圖片上傳實現(xiàn)更新頭像的過程
Vue是一套構(gòu)建用戶界面的框架,最近工作中遇到了一個需求,需要做一個更新頭像的通能,下面這篇文章主要給大家介紹了關(guān)于利用nodeJS+vue圖片上傳的相關(guān)資料,需要的朋友可以參考下2022-04-04
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實用工具和庫，可以幫助我們在應(yīng)用程序中進行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進行圖像識別和人臉對比,需要的朋友可以參考下2023-06-06
options是new Vue的參數(shù),我們一般稱之為選項或者構(gòu)造選項,下面這篇文章主要給大家介紹了關(guān)于Vue中options選項的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
ue3因其出色的響應(yīng)式系統(tǒng),以及便利的功能特性,完全勝任大型業(yè)務(wù)系統(tǒng)的開發(fā),這篇文章主要介紹了如何為Vue3提供一個可媲美Angular的ioc容器,需要的朋友可以參考下2024-08-08
electron-vue中報錯Cannot?use?import?statement?outside?a?m
Electron 是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了VUE+SpringBoot實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue中監(jiān)聽input框獲取焦點及失去焦點的問題
這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點，失去焦點的問題,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07