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 = true
                setTimeout(() => {
                    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就行了,找了半天,这个是目前我发现改动最小的,其他的还需要全局改事件之类的太麻烦,这个就挺好用,可以去试试

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