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>