vue自定义指令防重复点击v-preventReClick 自定义指令实现放重复点击 v-preventReClick封

第一步：新建plugins.js

import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-preventReClick
const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      console.log(el.disabled);
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 1500)
        // 不设置默认则为1500
      }
    })
  },
})

export default{ preventReClick }

第二步：在main.js中引入

import preventReClick from './utils/plugins'

第三步：

<button v-preventReClick="2000" @click="btnClick" />