vue项目双击from表单限制重复提交 添加全局注册自定义函数

第一步:

找到utils文件夹添加directive.js文件

import Vue from 'vue'
//全局防抖函数
// 在vue上挂载一个指量 preventReClick
const preventReClick = Vue.directive('preventReClick', {inserted: function (el, binding) {console.log(el.disabled)el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 3000)//binding.value可以自行设置。如果设置了则跟着设置的时间走//例如：v-preventReClick='500'}})}
});
export { preventReClick }

第二步:

找到main.js全局入口文件,(全局注册一下)

import './utils/directive.js'

第三步:

找到需要防止重复提交的事件触发位置 在标签中添加 v-preventReClick就行了

 <!-- 防抖 防止重复提交操作( v-preventReClick  )--><el-button type="primary" @click="submitForm" v-preventReClick>{{提交}}</el-button>

致此完成:不用改变方法  哪里需要就在哪里添加一个v-preventReClick就行了,找了半天,这个是目前我发现改动最小的,其他的还需要全局改事件之类的太麻烦,这个就挺好用,可以去试试

可能还有大神有更好的办法,欢迎评论分享👏🏻