Vue+Element框架全局实现按钮点击后延时启用

Vue+Element框架全局实现按钮点击后延时启用

做前后端分离项目的，前端按钮触发后端接口，手速快的人经常可以同时在按钮反应时间内连续点击，导致数据重复提交，而产产生冗余数据，致使系统数据紊乱，所以配置全局所有的按钮，在第一次点击后立刻禁用，待两秒后才可以触发第二次点击，本篇文章教你如何配置。

1、在src目录新建js文件，此处是新建的src/utils/public.js文件

export default {
  install(Vue) {
    // 防止重复点击
    Vue.directive('preventClick', {
      inserted(el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            // console.log("按钮禁用")
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
              // console.log("两秒后按钮启用")
            }, 2000)
          }
        })
      }
    })
  }
}

2、在框架级别main.js文件中引用配置的public.js文件

// 引入按钮延迟效果所在js文件
import preventClick from '@/utils/public'
Vue.use(preventClick)

使用

<el-button v-prevent-click  @click="sureClickEvent(1)">确定</el-button>