vue+element-自定义指令(directive),防止重复提交及重复发送http请求

全局directive的写法

// 提交以后禁用按钮一段时间,防止重复提交
import Vue from 'vue';
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled');
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled');
      }, 3000)
    })
  }
});

局部directive的写法

directives:{
      noMoreClick: {
        inserted(el, binding) {
          el.addEventListener('click', () => {
            el.classList.add('is-disabled');
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
              el.classList.remove('is-disabled');
            }, 2000)
          })
        }
      }
    },

使用:


  Confirm

————————————————
版权声明:本文为CSDN博主「juan_taylor」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_36146776/java/article/details/84953131

你可能感兴趣的:(vue+element-自定义指令(directive),防止重复提交及重复发送http请求)