前端防止反复发送请求(双击问题)vue实现
程序员文章站
2022-03-07 11:28:02
两种实现方式:1.在按钮点击发起请求后,弹个Toast,显示等待数据,等请求数据返回了将Toast清除掉。//防止双击Vue.directive("loading", { componentUpdated: function(el, binding) { if (binding.value == true) { Toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, // 禁用背...
两种实现方式:
1.在按钮点击发起请求后,弹个Toast,显示等待数据,等请求数据返回了将Toast清除掉。
//防止双击
Vue.directive("loading", {
componentUpdated: function(el, binding) {
if (binding.value == true) {
Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: "spinner",
message: "请稍后..."
});
} else {
Toast.clear();
}
}
});
2.在按钮点击发起请求后,将按钮禁用掉,同样等数据返回了将按钮禁用解除。
let forbidClick = null;
export default {
bind(e) {
const el = e;
let timer = null;
forbidClick = () => {
el.disabled = true;
el.classList.add('is-disabled');
timer = setTimeout(() => {
el.disabled = false;
el.classList.remove('is-disabled');
}, 3000);
};
el.addEventListener('click', forbidClick);
},
unbind() {
document.removeEventListener('click', forbidClick);
},
};
本文地址:https://blog.csdn.net/qq_43277404/article/details/107457569