利用Vue的自定义指令directives阻止连续点击（全局）

记录一下使用Vue的自定义指令directives阻止连续点击的方法，高级点的说法是函数防抖或者函数节流。

前提

1.vue，cli架构已安装
2.全局注册方法来源 @lesdom

流程如下

全局指令的注册方法同全局组件
1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等)
2、在文件夹中新建directives.js文件
3、在directives.js文件引入所有要注册的全局指令
4、在main.js中引入directives.js文件并使用Vue.use()全局注册

具体操作和代码

1. utils - directives.js
   因为使用了el的disable属性，仅可在button或input等可使用disable禁用的标签才可以正常工作
   普通的div或者span添加@click无法防止

export default (Vue)=>{
Vue.directive(
    //防止连续点击
    'preventReclick', {
    inserted(el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 2000)
            }
        })
    }
})
}

2. main.js
   在main.js中引入写好的方法并使用（需要在Vue实例生成前）

import directives from '@/utils/directives.js'

Vue.use(directives)
new Vue({
        })

3. 页面

其他

非button、input标签的防止连续点击待更新