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>

 

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页