項目需求：要求當前項目每個頁面滑到超出一屏的距離時，出現 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

按照上述代碼編寫便可以實現全局頁面置頂操作；便於後期維護，修改；

vue 通過自定義指令實現 置頂操作；