美文网首页
vue防止按钮在短时间内被多次点击的方法

vue防止按钮在短时间内被多次点击的方法

作者: 双耳云 | 来源:发表于2019-06-14 16:18 被阅读0次

    1.vue组件

    import Vue from 'vue'
    (function(){
      let openDelay=false;
      Vue.directive('intervalclick', function(el,binding){
        el.onclick=function(e){
          if(openDelay)return;
          openDelay=!openDelay;
          if (!binding.value) {
            alert("未传入Value数据!");
            return;
          }
          let func = binding.value['func'];
          let time=binding.value['time'];
          if(typeof time !=='number'){
            alert("传入等待时间错误");
            return;
          }
          let args=[];
          for (const key in binding.value) {
            if (binding.value.hasOwnProperty(key)) {
              if(key==='func'||key==='time')continue;
              args.push(binding.value[key])
            }
          }
          setTimeout(() => {
            openDelay=!openDelay;
          }, time);
          func(...args);
        }
      })
    })()
    
    

    2.使用

    2.1在script中引用

    import clickStatefrom '../../js/clickState'
    

    2.2在html中引用

    <el-button type="primary" size="small" v-intervalclick='{func:reset,time:5000,}'>重置</el-button>
    

    相关文章

      网友评论

          本文标题:vue防止按钮在短时间内被多次点击的方法

          本文链接:https://www.haomeiwen.com/subject/nwepfctx.html