vue项目之自定义指令防抖,等待xx秒之后方可再次点击

vue提供install可供我们开发新的插件及全局注册组件等
install方法第一个参数是vue的构造器，第二个参数是可选的选项对象

/**

 * 防抖指令

 * v-preventReClick || v-preventReClick="3000"

 */

export const preventReClick = {

  install(Vue) {

    Vue.directive('preventReClick', {

      inserted(el, binding) {

        el.addEventListener('click', () => {

          if (!el.disabled) {

            el.disabled = true

            setTimeout(() => {

              el.disabled = false

            }, binding.value || 5000)

          }

        })

      }

    })

  }

}

如果使用较为频繁，那么可以引入到main.js  

import { preventReClick } from '@/utils/util'

Vue.use(preventReClick)

组件调用即可

  <el-button

              size="mini"

              type="primary"

              v-preventReClick

              >按钮</el-button

            >