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

1、创建intervalclick.js

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、main.js中引入

import clickState from '@/utils/intervalclick'

3、使用

v-intervalclick="{func:nextControl, time:1000}"

其中，第一个参数nextControl为方法，time为时间间隔