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> 

 

到此结束，这个组件，百度也得不到结果，能解决的只有你自己，要么放弃使用这个组件，要么就搞懂它，然后研究使用，当你知道它的原理，所有问题都不再是问题。这也是建议大家多看源码的理由之一。