方法：通过前台画面将按钮变成不可编辑的状态来实现
步骤如下：文章来源：https://www.toymoban.com/news/detail-606537.html
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 ）：文章来源地址https://www.toymoban.com/news/detail-606537.html
<a-button type="primary" @click="handleSubmit" v-prevent-re-click>确定</a-button>
到了这里，关于vue 防止快速点击导致重复调用接口的解决方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
