【Vue】自定義防止重複提交指令

前端開發中防重複提交是一個很頭疼又繞不開的話題。
現在我們定義一個指令v-preventReClick讓它專門來幹這件事。

talk is cheap, show me the code.

v-preventReClick

src/directive/preventReClick.js

/**
 * 防止重複提交指令
 * 參考文檔 https://juejin.im/post/5eb7fc626fb9a0436a7c6af1#heading-0
 *
 * @author: tanpeng
 * @date : 2020/5/20 18:08
 * @version: v1.0.0
 */
const preventReClick = {
  install: (Vue, options) => {
    Vue.directive('preventReClick', {
      inserted: (el, binding) => {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            // 傳入綁定值就使用，默認3000毫秒內不可重複點擊
            setTimeout(() => el.disabled = false, binding.value || 3000)
          }
        })
      }
    })
  }
}

export default preventReClick

usage

src/main.js

import preventReClick from '@/directive/preventReClick'
// 顯示聲明爲全局指令，代碼可讀性更好
Vue.use(preventReClick)

src/Demo.vue

// 指定延遲時間1000ms
<a-button  size="large" type="primary" v-preventReClick="1000">保 存</a-button>

// 默認延遲時間3000ms
<a-button  size="large" type="primary" v-preventReClick>保 存</a-button>

參考

Vue工程化封裝實踐系列(二)[表單按鈕重複提交，axios重複請求的處理方案]