vue自定义指令，防止按钮重复点击

一、创建文件preventReClick.js将下面代码拷贝进文件

// 自定义指令防止按钮重复点击 v-preventReClick
export default {
    inserted(el, binding, vnode) {
    el.addEventListener('click', () => {
      // 是否可见
      if (!el.disabled) {
        el.disabled = true
        el.style.display = 'none'
        setTimeout(() => {
          el.disabled = false
          el.style.display = ''
        }, binding.value || 1500)
        // 不设置默认则为1500
      }
    })
  },
}

二、同级下创建index.js

import preventReClick from './preventReClick'

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

if (window.Vue) {
  window['preventReClick'] = preventReClick
  Vue.use(install); // eslint-disable-line
}

export default install

Vue3写法 

import preventReClick from './preventReClick'

export default function directive(app){
  app.directive('preventReClick',preventReClick)
}

三、在main.js引入index.js

import permission from './directive/permission/index.js'//你的文件路径
Vue.use(permission)

Vue3写法

import directive from './directive' // directive
directive(app)

四、在你需要控制的按钮上加入v-preventReClick="2000" //2000是隐藏时间可以根据你的需求设置

<el-button type="primary" @click="submitForm" v-preventReClick="2000">按钮</el-button>