、前言

elementUI有說(shuō)明文檔，但我為什么還要重新寫一下呢？因?yàn)槲臋n也有坑，一開始使用時(shí)你復(fù)制進(jìn)去，可能都沒(méi)有效果。也不知道原因在哪，就如Backtop回到頂部的組件，不去看源碼，真心不知道是怎么個(gè)所以然。一開始，我把這個(gè)組件放到我頁(yè)面的底部，結(jié)果是無(wú)效果的，而且還會(huì)報(bào)css的這兩個(gè)樣式錯(cuò)誤（.page-component__scroll .el-scrollbar__wrap），看完這個(gè)文檔，也沒(méi)找到這兩個(gè)是什么東西，在哪設(shè)置。全文搜索，也沒(méi)找到這兩個(gè)css。最后逼我進(jìn)去看Backtop組件源碼，看懂后，刪除了沒(méi)必要的東西，放置的位置調(diào)整一下，完美解決。這也是本站使用的回到頂部的效果。以下我會(huì)貼出官方文檔及源碼，還有解決思路

二、官方文檔 https://element.eleme.cn/#/zh-CN/component/backtop

Backtop 回到頂部

返回頁(yè)面頂部的操作按鈕

基礎(chǔ)用法

滑動(dòng)頁(yè)面即可看到右下方的按鈕。

<template>
 Scroll down to see the bottom-right button.
 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

自定義顯示內(nèi)容

顯示區(qū)域被固定為 40px * 40px 的區(qū)域, 其中的內(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>

如果沒(méi)試過(guò)的可以先跟著官方的文檔試下，看是否可行，若不可行，接著往下看

三、el-backtop組件源碼

<template>
 <transition name="el-fade-in">
 <div
 v-if="visible"
 @click.stop="handleClick"
 :style="{
 'right': styleRight,
 'bottom': styleBottom
 }"
 class="el-backtop">
 <slot>
 <el-icon name="caret-top"></el-icon>
 </slot>
 </div>
 </transition>
</template>
<script>
import throttle from 'throttle-debounce/throttle';
export default {
 name: 'ElBacktop',
 props: {
 visibilityHeight: {
 type: Number,
 default: 200
 },
 target: [String],
 right: {
 type: Number,
 default: 40
 },
 bottom: {
 type: Number,
 default: 40
 }
 },
 data() {
 return {
 el: null,
 container: null,
 visible: false
 };
 },
 computed: {
 styleBottom() {
 return `${this.bottom}px`;
 },
 styleRight() {
 return `${this.right}px`;
 }
 },
 mounted() {
 this.init();
 this.throttledScrollHandler=throttle(300, this.onScroll);
 this.container.addEventListener('scroll', this.throttledScrollHandler);
 },
 methods: {
 init() {
 this.container=document;
 this.el=document.documentElement;
 if (this.target) {
 this.el=document.querySelector(this.target);
 if (!this.el) {
 throw new Error(`target is not existed: ${this.target}`);
 }
 this.container=this.el;
 }
 },
 onScroll() {
 const scrollTop=this.el.scrollTop;
 this.visible=scrollTop >=this.visibilityHeight;
 },
 handleClick(e) {
 this.scrollToTop();
 this.$emit('click', e);
 },
 scrollToTop() {
 let el=this.el;
 let step=0;
 let interval=setInterval(()=> {
 if (el.scrollTop <=0) {
 clearInterval(interval);
 return;
 }
 step +=10;
 el.scrollTop -=step;
 }, 20);
 }
 },
 beforeDestroy() {
 this.container.removeEventListener('scroll', this.throttledScrollHandler);
 }
};
</script>

組件的幾個(gè)參數(shù)：

1. visibility-height:滾動(dòng)高度達(dá)到此參數(shù)值才出現(xiàn)，默認(rèn)200，是number類型（使用如:visibility-height="100"）
2. target：觸發(fā)滾動(dòng)的對(duì)象，是String類型，你可以不傳
3. right：控制其顯示位置, 距離頁(yè)面右邊距，默認(rèn)40，是number類型，數(shù)值越大，離右邊越遠(yuǎn)。
4. bottom：控制其顯示位置, 距離頁(yè)面底部距離。默認(rèn)40，是number類型，你可以調(diào)整他的值，越大離底部越遠(yuǎn)。

三、思路

當(dāng)你看完backtop的組件源碼后，你是否會(huì)有所領(lǐng)悟呢？他的組件參數(shù)都有默認(rèn)值，這意思就是，我們可以什么都不傳，調(diào)用這個(gè)組件即可使用。

<el-backtop></el-backtop>

是的，你沒(méi)看錯(cuò)，把上面那段代碼Copy到你的代碼中，即可使用。記得把代碼放在最外層的div里的第一個(gè)，不要放在尾部。

<div style="width: 100%;height: 100%;">
 <el-backtop :bottom="60"></el-backtop>
<div>

到此結(jié)束，這個(gè)組件，百度也得不到結(jié)果，能解決的只有你自己，要么放棄使用這個(gè)組件，要么就搞懂它，然后研究使用，當(dāng)你知道它的原理，所有問(wèn)題都不再是問(wèn)題。這也是建議大家多看源碼的理由之一。