vue 防止表单重复提交

在plugins文件夹新建directives.js文件

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000) // 传入绑定值就使用，默认3000毫秒内不可重复触发
      }
    })
  }
})

export default { preventReClick }

在main.js文件中全局引入

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

使用方法

// v-preventReClick默认为3000 ，也可以设置
<button class="btn-rgt" v-preventReClick= "1000" @click="goPay(3)">同意</button>