BackTop组件的实现思路

BackTop组件实现功能：回到页面顶部。并且只有当页面滚动到一定距离后，才显示出来。

由于该组件在页面滚动时位置保持不变，所以采用fixed定位。

给它绑定单击响应函数backClick()，由于绑定事件的操作只能对原生的html标签进行（给组件标签绑定无效），所以使用了.native修饰符，其作用是监听该组件根元素的原生事件。此外，通过v-show属性来控制它的显示与否，决定变量为isShowBackTop。

<back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

当页面滚动时，会触发父组件methods中定义的scrollEvent方法，我们可以在该方法内部判断BackTop是否到了该显示的位置：

this.isShowBackTop = -position.y > 1000;

在methods中定义backClick()方法，直接访问并调用scroll子组件中的scrollTo方法，回到顶部则意味着传入参数均为0。

backClick() {
      this.$refs.scroll.scrollTo(0, 0);
}

由于该组件的功能较为独立，可能会被多次复用，所以更好的选择是把它封装为一个混入mixin。在mixin中完成组件的导入、注册、数据初始化、方法的定义等。

import BackTop from "components/content/backTop/BackTop";
export const backTopMixin = {
  components: {
    BackTop
  },
  data(){
    return{
      isShowBackTop: false
    }
  },
  methods: {
    backClick() {
      this.$refs.scroll.scrollTo(0, 0);
    }
  }
}

这样只需要在使用时导入backTopMixin即可：

import { backTopMixin } from "common/mixin";
...
mixins: [backTopMixin]  // 选项对象中注册

注意上面控制BackTop显示的那条语句是不能被抽取到混入中的，因为它和一些其它的功能耦合，被封装在同一个方法中。而抽取至少也得以方法为单位，不能只抽取若干条语句。