转载自:https://blog.csdn.net/zhj51616/article/details/107089658/
只是转载 防止找不到
介绍两种vue项目中防止用户在一定时间内频繁点击按钮触发事件的方法
1.主要思想就是禁止用户在一定的时间多次点击,在一定时间内将按钮禁用,用定时器实现,一定时间之后用户可再次点击
1. 新建js文件(因为是全局可用的,文件可以叫preventRepeatClick.js,我这里是叫index.js)
代码如下:
export default {
install (Vue) {
// 防止重复点击
Vue.directive('preventReClick', {
inserted (el, binding) {
console.log("binding-7",binding)
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
},binding.value || 1000)
}
})
}
})
}
}