前端vue按钮全局设置防重复提交

1、定义全局指令文件 Vue.directive

import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-preventReClick(使用时)
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      console.log(11111)
      console.log(el)
      if (!el.disabled) {
        el.disabled = true
        el.style.opacity = '0.5'
        el.style.cursor = 'not-allowed'
        setTimeout(() => {
          el.disabled = false
          el.style.opacity = '1'
          el.style.cursor = ''
        }, binding.value || 1500)
      }
    })
  }
})
export default preventReClick

2、mainjs中引用

import preventReClick from './plugins/plugins'
Vue.use(preventReClick)

3、在需要的地方使用

<el-button type="primary" v-preventReClick="5000" @click="alertText">默认按钮</el-button>