vue 通过自定义指令实现 置顶操作；

项目需求：要求当前项目每个页面滑到超出一屏的距离时，出现 backTop 按钮，点击则回到最顶端；俗称置顶操作：

因为涉及到的页面较多，每个页面都加肯定显得重复累赘，最终想到了 Vue 的自定义指令 Vue.directive；

场景分析：①.监听页面滚动过程，计算当前的 scrollY 与 设定的 number 值进行对比，从而决定 backTop 按钮的出现隐藏；

　　　　　②.出现 backTop 按钮时，点击按钮，实现置顶效果（为实现更完美的置顶效果，加了定时器，保证了一定速度的滑行）；

实现过程：为保证作用于全局，我们在 main.js，App.vue 中进行代码的编写：

main.js

// 自定义指令实现back-top;
Vue.directive('scroll-show',{
  inserted(el,binding){
    let scope = binding.arg || '200';
    window.addEventListener('scroll',function(e){
      if(this.scrollY > Number(scope)){
        binding.value.value = true;
      }else{
        binding.value.value = false;
      }
    })
  }
})
Vue.directive('back-top',{
  inserted(el,binding){
    let e = binding.arg || 'click';
    el.addEventListener(e,function(){
      let scrollToptimer = setInterval(function(){
        let top = document.documentElement.scrollTop + document.body.scrollTop;
        let speed = top/4;
        top -= speed;
        document.documentElement.scrollTop = document.body.scrollTop = top;
        if(top == 0){
          clearInterval(scrollToptimer);
        }
      },30)
    })
  }
})

backTop.vue

<template>
  <div class="back-top" v-show='isShow.value'>
    <span></span>
  </div>
</template>
<script>
export default {
  props: ['isShow']
}
</script>
<style scoped>
.back-top{
  display: flex;
  align-items:center;
}
.back-top > span:nth-child(1) {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  background-image: url(./images/backTop.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.back-top > span:nth-child(2) {
  color: #333;
  padding-left:0.5rem;
}
.back-top {
  position: fixed;
  right: 1.5rem;
  bottom: 12rem;
}
</style>

App.vue

按照上述代码编写便可以实现全局页面置顶操作；便于后期维护，修改；