当前位置: 移动技术网 > IT编程>脚本编程>vue.js > 前端防止反复发送请求(双击问题)vue实现

前端防止反复发送请求(双击问题)vue实现

2020年07月22日  | 移动技术网IT编程  | 我要评论
两种实现方式: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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网