Vue 防止用户短时间内频繁多次点击

功能描述:禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击.

功能实现：使用Vue.directive实现，全局注册，方便其他主键调用

Vue 功能实现：

在mian.js 添加如下代码：

// Vue 定义自定义指令:防止按钮重复提交
Vue.directive('preventReClick', {
        inserted (el, binding) {
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true
              setTimeout(() => {
                el.disabled = false
              },binding.value || 1000)
            }
          })
        }
      })

在触发点击事件的按钮上直接用指令即可

效果说明:五秒之后 t添加按钮的事件才可再次触发。

相关知识点补充

Vue.directive 对象涉及的钩子函数（均为可选）

• bind
  只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted
  被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update
  所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated
  指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind
  只调用一次，指令与元素解绑时调用。