vue cli项目防止表单提交暴力点击

vue cli项目防止表单提交暴力点击

在utils文件新建plugins.js
内容如下：

import Vue from 'vue'
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
})

在main.js全局引用

import './utils/plugins'    //注意路径

在提交按钮使用 v-preventReClick

   提交

完成！！！