vue開發——elementUI中的Backtop回到頂部

此文章轉載於福建開源社區http://www.fjkysq.com/blog/77.html

一、前言

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

 

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

 

Backtop 回到頂部

返回頁面頂部的操作按鈕

 

基礎用法

滑動頁面即可看到右下方的按鈕。

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

 

自定義顯示內容

顯示區域被固定為 40px * 40px 的區域, 其中的內容可支持自定義。

<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> 

 

如果沒試過的可以先跟着官方的文檔試下，看是否可行，若不可行，接着往下看

 

三、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> 

 

組件的幾個參數：

1. visibility-height:滾動高度達到此參數值才出現，默認200，是number類型（使用如:visibility-height="100"）
2. target：觸發滾動的對象，是String類型，你可以不傳
3. right：控制其顯示位置, 距離頁面右邊距，默認40，是number類型，數值越大，離右邊越遠。
4. bottom：控制其顯示位置, 距離頁面底部距離。默認40，是number類型，你可以調整他的值，越大離底部越遠。

三、思路

當你看完backtop的組件源碼后，你是否會有所領悟呢？他的組件參數都有默認值，這意思就是，我們可以什么都不傳，調用這個組件即可使用。

<el-backtop></el-backtop> 

 

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

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

 

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