vue + elementUI 阻止按钮重复提交（自定义指令）

vue 阻止按钮重复提交（自定义指令）

一个简单的全局自定义指令阻止按钮重复点击完成！

1.stopBtnRepeat.js

// 阻止按钮重复提交
import Vue from 'vue'

Vue.directive("stopBtnRepeat", {
  bind: function (el, binding) {
    function clickHandler(e) {
      if (el.contains(e.target)) {
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, binding.value || 3000)
        }
        return false;
      }
    }
    el.bffClick = clickHandler;
    document.addEventListener('click', clickHandler);
  },
  unbind(el) {
    document.removeEventListener('click', el.bffClick);
    delete el.bffClick;
  },
})
           

2.main.js中引入

3.使用