vue 中防止用户频繁点击按钮

在后台项目中遇到一个一防止用户短时间内多次点击按钮的需求，主要的思路就是使用的vue的自定义指令设置延时,然后全局注册，方便使用

1. 新建js文件，因为是全局可用的，文件可以叫preventRepeatClick.js

export default {

  install (Vue) {

    // 防止重复点击

    Vue.directive('preventReClick', {

      inserted (el, binding) {

          console.log("binding-7",binding)

        el.addEventListener('click', () => {

          if (!el.disabled) {

            el.disabled = true

            setTimeout(() => {

              el.disabled = false

            },binding.value || 1000)
          }
        })
      }
    })
  }
}

2. 在main.js 里面引入改文件

import preventReClick from './js/preventRepeatClick.js'

Vue.use(preventReClick)

3. 在触发事件的按钮上值接使用该指令

  <el-button type="primary" v- preventReClick>主要按钮</el-button>