vue directive自定义指令实现防抖

throttle.js

export default {
    bind: (el, binding) => {
      let throttleTime = binding.value // 时间
      if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
        throttleTime = 2000
      }
      let cbFun
      el.addEventListener('click', event => {
        if (!cbFun) { // 第一次执行
          cbFun = setTimeout(() => {
            cbFun = null
          }, throttleTime)
        } else {
          event && event.stopImmediatePropagation()
        }
      }, true)
    }
  }

clickAgain.js

import throttle from './throttle'

const install = function(Vue) {
  Vue.directive('throttle', throttle)
}

if (window.Vue) {
  window.waves = throttle
  Vue.use(install); // eslint-disable-line
}

throttle.install = install
export default throttle

main.js

import clickAgain from '@/utils/clickAgain.js'
Vue.directive('clickAgain', clickAgain)

页面使用

<el-button type="primary" @click="auditApply()" v-clickAgain>审核</el-button>