基础用法
滑动页面即可看到右下方的按钮。
<template>
<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>
组件的几个参数：
visibility-height:滚动高度达到此参数值才出现，默认200，是number类型（使用如:visibility-height="100"）
target：触发滚动的对象，是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
