vue2全局指令-限制按钮在某个时间内的点击事件

需求：点击按钮发送请求时，如果连续快速点击，容易发送多次请求，怎么在某一时间段内点击多次按钮，但只发送一次请求呢？

解决思路：

点击多次，只发送一次请求，可以采用函数的防抖节流；当然也可以写一个局部或全局的自定义指令去限制按钮的点击事件。

解决办法：

本次采用的是：利用全局指令去限制按钮的点击事件，便于其他页面使用（亲测有用）。

本文可直接复制粘贴使用(但请先搞清楚代码的逻辑):

1. 首先在src目录下新建一个directive文件夹，在此文件夹下新建一个文件，取名为： preventClick.js，在文件内书写下方代码：

// 设置全局指令,对button按钮进行点击限制
export default {
    install(Vue) {
      Vue.directive('preventClick', {
        inserted(button, bind) {
          button.addEventListener('click', () => {
            if (!button.disabled) { // 按钮有disabled属性
              button.disabled = true;
              setTimeout(() => {
                button.disabled = false
              }, 5000)
            }
          })
        }
      })
    }
}

2. 在main.js中全局注册

// 全局指令
import preventClick from '@/directive/preventClick.js'
Vue.use(preventClick)

3. 在需要使用的文件中直接v-preventClick即可

<button v-if="score.enabledStatu" @click="stopScan(text, score)" class="options" v-preventClick>停止</button>

总结：

需求很多，但解决办法也很多，慢慢分析。本文如有不全面的地方，请指教。