vue 防止快速点击导致重复调用接口的解决方法

方法：通过前台画面将按钮变成不可编辑的状态来实现
步骤如下：

1.新建js文件（preventReClick.js）

import Vue from 'vue'

// 防止重复提交指令
const preventReClick = Vue.directive('preventReClick', {
    inserted(el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                //默认500毫秒后执行
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 500)
            }
        })
    }
})

export default{ preventReClick }

2.在main.js文件中导入文件并引用

//文件目录
import preventReClick from './utils/preventReClick.js'
Vue.use(preventReClick)

3. 完成前面两个步骤该方法即可被全局调用

在按钮中引用（添加指令 v-prevent-re-click ）：

<a-button type="primary" @click="handleSubmit" v-prevent-re-click>确定</a-button>