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