第一步:
找到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就行了,找了半天,这个是目前我发现改动最小的,其他的还需要全局改事件之类的太麻烦,这个就挺好用,可以去试试
可能还有大神有更好的办法,欢迎评论分享👏🏻