Element UI中的BackTop无法使用的解决方案

问题描述

最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。

具体表现为：滚动页面后该返回顶部按钮组件并没有出现。

ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop

问题分析

在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的使用方法，但是需要在某个容器里如div。

实际上，target属性并不需要的

<template>
  <div>
    <el-backtop></el-backtop>
  </div>  
</template>

一个更加直观的代码可以这样

<template>
  <div>
    <el-backtop></el-backtop>
    <p v-for="i in 50" :key="i">占一行</p>
  </div>  
</template>

于是我创建了一个新的页面并且使用该方法发现出现了该组件，代表该组件是没有问题的。

但是在我的项目里面却无法使用，原因我分析了一下，可能原因有：

1. 我在index.html设置了body{overflow:hidden}
2. 我是在<el-main>中使用的该组件

解决方法

BackTop组件监听的是body的滚动，所以body的高度需要超出显示高度出现滚动条才行，overflow属性不能为hidden。并且如果是在某个div内使用的话则可以使用下面我封装的组件。

 

于是，我查看了BackTop组件的原码，发现有点复杂（我是萌新），然后我决定还是自己写一个BackTop吧

以下为我封装的一个BackTop组件，是以ElementUI为基础的，需要用到ElementUI里的el-button与el-icon

<template>
  <div ref="btn" class="backtop">
    <el-button type="primary" :icon="icon" circle v-show="show" @click="backtop"></el-button>
  </div>
</template>

<script>
export default {
  name: "BackTop",
  props: {
    length: {
      type: Number,
      default: 200
    },
    bottom: {
      type: Number,
      default: 50
    },
    right: {
      type: Number,
      default: 50
    },
    icon: {
      type: String,
      default: "el-icon-top"
    },
    speed: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    var btn = this.$refs.btn;
    (btn.style.right = this.right + "px"),
      (btn.style.bottom = this.bottom + "px");
    this.$refs.btn.parentElement.onmousewheel = this.isShow;
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    backtop() {
      this.show = false;
      var parent = this.$refs.btn.parentElement;
      parent.scrollTop -= this.speed;
      if (parent.scrollTop > 0) {
        window.requestAnimationFrame(this.backtop);
      }
    },
    isShow() {
      if (this.$refs.btn.parentElement.scrollTop > this.length)
        this.show = true;
      else this.show = false;
    }
  }
};
</script>

<style>
.backtop {
  position: fixed;
  right: 50px;
  bottom: 50px;
}
</style>

组件使用方法：

<template>
  <div>
    <!-- 回到顶部的按钮 -->
    <BackTop 
     :length="100" 
     :bottom="60"
     :right="60" 
     :speed="50"
     :icon="el-icon-caret-top"
    />
  </div>
</template>

<script>
//这里写的是我的路径
import BackTop from "@/components/BackTop.vue";
export default {
  components: {
    BackTop
  }
};
</script>

其中五个属性可自定义传值，也可以不传值

• length：为向下滚动的xx距离后，出现BackTop，传数字类型，默认200
• bottom、right：离底边、右边的距离，传数字类型，默认50
• icon：为按钮的图标，传入字符串类型，图标名称参考：https://element.eleme.cn/#/zh-CN/component/icon
• speed：为向上滚动速度单位是px，传入数字类型，默认100

注意事项是改组件会自动监听它所在最近父亲节点，建议将父亲节点的样式设置为：

.parent{
    overflow-y:scroll;
    //height:固定值
}

还有就是页面内容超出才能触发滚动，才能导致该组件出现

当然可以改写该组件变成规定几秒内返回顶部，而非以规定速度返回顶部，有待各位大佬自行修改了