Vue防止按钮重复提交
参考了:https://www.cnblogs.com/adbg/p/11271237.html
方法:使用全局指令的方式。
一、新建指令
1、我们首先新建一个js文件,例如起名为plugins.js。
2、然后我们写入以下内容,将preventReClick指令暴露出去。
import Vue from 'vue' // 防止重复提交指令 const preventReClick = Vue.directive('preventReClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 3000) } }) } }) export { preventReClick }
二、main.js引用
然后我们在main.js引用这个指令,使其全局使用。
import { preventReClick } from '@/api/tool/plugins';
三、使用
在按钮加上v-prevent-re-click即可。
<el-button type="primary" @click="submitForm" v-prevent-re-click></el-button>