vue 回到頂部的小問題

今天在用vue項目中，實現回到頂部功能的時候，我寫了一個backTop組件，接下來需要通過監聽window.scroll事件來控制這個組件顯示隱藏

因為可能會有其他的組件會用到這樣的邏輯，所以將此功能做成一個自定義指令：

根據滾動的距離控制一個數據為true還是為false（v-scroll-show）

問題：

唯一需要註意的是，在指令的鉤子函數中我們可以訪問到el，也就是使用指令的標簽，但是我們不能直接更改value（指令的值所代表的數據）

所以我們使用引用類型來進行地址的傳遞來解決這個問題

接下來有寫了一個v-back-top指令，就是將回到頂部功能做成一個指令，哪個組件或者dom需要使用到回到頂部，就加上這個指令就可以，設置不同的參數來控制在不同的情況下觸發

<BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop>

data(){
    return {
        isBackShow:{value:false}
    }
 },
              

js:

import Vue from 'vue'

Vue.directive('scroll-show',{
    inserted(el,binding){
        let scope = binding.arg || '200'
        window.addEventListener("scroll",function(e){
            if(this.scrollY>Number(binding.arg)){
                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(){
            document.documentElement.scrollTop = document.body.scrollTop =0;
        })
    }
})