(1)在工具类utils中定义自定义指令
export default {
install(Vue) {
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
const events = el.style.pointerEvents
if (events == "") {
el.style.pointerEvents = 'none'
setTimeout(() => {
el.style.pointerEvents = "";
}, binding.value || 1000); //默认是1s
}
// if (!el.disabled) {
// el.disabled = true;
// setTimeout(() => {
// el.disabled = false;
// }, binding.value || 1000);
// }
})
}
})
}
}
(2)在main.js中全局引入
import preventReClick from './utils/directive/preventReClick'
Vue.use(preventReClick)
(3)页面中使用:3000代表3秒点击间隔
<button @click="testClick" v-preventReClick="3000">测试</button>