基礎用法
滑動頁面即可看到右下方的按鈕浆竭。
<template>
? <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
自定義顯示內容
顯示區(qū)域被固定為 40px * 40px 的區(qū)域, 其中的內容可支持自定義系宜。
<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>
組件的幾個參數：
visibility-height:滾動高度達到此參數值才出現(xiàn)玻褪，默認200，是number類型（使用如:visibility-height="100"）
target：觸發(fā)滾動的對象敛瓷，是String類型河哑，你可以不傳
right：控制其顯示位置, 距離頁面右邊距，默認40风皿，是number類型河爹，數值越大，離右邊越遠桐款。
bottom：控制其顯示位置, 距離頁面底部距離咸这。默認40，是number類型魔眨，你可以調整他的值媳维，越大離底部越遠。
四遏暴、思路
當你看完backtop的組件源碼后侄刽，你是否會有所領悟呢？他的組件參數都有默認值拓挥，這意思就是唠梨，我們可以什么都不傳袋励，調用這個組件即可使用侥啤。
<el-backtop></el-backtop>
是的，你沒看錯茬故，把上面那段代碼Copy到你的代碼中盖灸，即可使用。記得把代碼放在最外層的div里的第一個磺芭，不要放在尾部赁炎。
<div style="width: 100%;height: 100%;">
? <el-backtop :bottom="60"></el-backtop>
<div>
原文鏈接：https://blog.csdn.net/qq348843576/article/details/103261602
