- 标签上加 `v-preventReClick`即可
import { DirectiveBinding } from "vue/types/options";
export default {
install(Vue:any) {
Vue.directive('preventReClick', {
inserted(el: any, binding: DirectiveBinding) {
el.addEventListener('click', (value: Event) => {
console.log(el, 'preventReClick');
if (!el.disabled) {
el.disabled = true;
setTimeout(() => {
el.disabled = false;
}, binding.value || 1000);
}
});
},
});
},
};
import install from './utils/preventReClick'
Vue.use(install)
<van-button
@click="buttonClick($event)"
:disabled="disabled"
v-preventReClick
>{{ font }}</van-button
>
buttonClick(event: any) {
if (event.currentTarget?.disabled) {
return;
} else {
this.$emit('click');
}
}
- 备注:event.target返回触发事件的元素,event.currentTarget返回绑定事件的元素,在组件中使用需要注意