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