Vue 全局添加按钮防抖指令 v-throttle

Vue 全局添加按钮防抖指令 v-throttle

//---src/directive/md-submit/throttle.js
export default {
    inserted(el, binding) {
        let throttleTime = binding.value // 节流时间
        if (!throttleTime) { // 用户若不设置节流时间，则默认2s
          throttleTime = 1000
        }
  
    el.addEventListener('click', e => {
        el.classList.add('is-disabled');
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
          el.classList.remove('is-disabled');
        }, throttleTime)
      })
    }
  }
  

//---src/directive/index
import throttle from './md-submit/throttle'
const install = Vue => {
  Vue.directive('throttle', throttle);
}
export default {
  install
}

//---main.js
import directive from './directive/index'
Vue.use(directive)

//---使用方法
<a-button type="primary" v-throttle @click="onSubmit"> 保 存 </a-button>