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

2019-06-14  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读