记录一下使用Vue的自定义指令directives阻止连续点击的方法，高级点的说法是函数防抖或者函数节流。
前提
1.vue，cli架构已安装
2.全局注册方法来源 @lesdom
流程如下
全局指令的注册方法同全局组件
1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等)
2、在文件夹中新建directives.js文件
3、在directives.js文件引入所有要注册的全局指令
4、在main.js中引入directives.js文件并使用Vue.use()全局注册
具体操作和代码
-
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)
}
})
}
})
}
-
main.js
在main.js中引入写好的方法并使用（需要在Vue实例生成前）
import directives from '@/utils/directives.js'
Vue.use(directives)
new Vue({
})
- 页面
<template>
<div class="body">
//在button标签内添加v-（自己定义的方法名）即可使用
<button v-preventReclick @click="clickMethod">防止连续点击</button>
//方法定义时可读取binding.value指定间隔时间，下例为间隔0.5s（默认为2s）
<button v-preventReclick="500" @click="clickMethod">防止连续点击(0.5秒间隔)</button>
</div>
</template>
其他
非button、input标签的防止连续点击待更新
