今天在用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;

		})

	}

})