vue限制点击次数, 解决按钮多次点击重复提交数据问题

1、首先在项目目录下创建Directives.js文件，自定义指令

export default {
  install(Vue) {
    // 禁止短时间内重复点击
    Vue.directive('preventClick', {
      inserted(button, bind) {
        button.addEventListener('click', () => {
          if (!button.disabled) {
            button.disabled = true;
            setTimeout(() => {
              button.disabled = false
            }, 3000)
          }
        })
      }
    })
  }
}

2、然后在main.js文件引用

import Directives from './style/js/result/directives'
Vue.use(Directives)

3、在当前页面使用的时候引用

<el-button v-preventClick>开始</el-button>