vue3.0 中防止按钮多次提交

vue3.0 中防止按钮多次提交

 

import { createApp } from 'vue'
import indexApp from './App.vue'
const app = createApp(indexApp)
/**
@方法名：directive(vue,内置)
@来源：Winford.Wang|2021-09-16，17:45
@参数：
@描述：用于防止多次点击保存效果，仅用于button
**/
app.directive('preventReClick', (el, binding) => {
  function preventReClickFun(elValue, bindingValue) {
    if (!elValue.disabled) {
      elValue.disabled = true
      setTimeout(() => {
        elValue.disabled = false
      }, bindingValue.value || 3000)
    }
  }
  el.addEventListener('click', () => preventReClickFun(el, binding))
  binding.dir.unmounted = function() {
    el.removeEventListener('click', () => preventReClickFun(el, binding))
  }
});

// 使用
<el-button type="warning" v-preventReClick>单击按钮</el-button>