1、新建preventReClick.js文件
// 自定义指令防止按钮重复点击 v-preventReClick
export default {
install(Vue) {
// 防止重复点击
Vue.directive('preventReClick', {
inserted:function(el,binding){
el.addEventListener('click', () => {
if (el.style['pointer-events'] != 'none') {
el.style['pointer-events'] = 'none';
setTimeout(() => {
el.style['pointer-events'] = 'all';
}, binding.value || 1500)
}
})
}
})
}
}
2、在main.js中引入preventReClick.js文件
import preventReClick from './utils/preventReClick'
Vue.use(preventReClick);
3、按钮添加指令
<button @click="addClick()" v-preventReClick="3000">点击</button>
时间是3000毫秒内触发一次