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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值