Vue中各个控件防暴击全局处理方案 ​

在Vue项目中经常遇到用户短时间内频繁多次点击而造成的请求流量浪费或出现一些多次重复弹窗等重复性bug。

Vue控件防暴击处理方案设计思想是防止用户在一定时间内频繁点击触发事件，采用setTimeout时间间隔监听设置当前控件可点击状态，在设置规定时间内将按钮禁用，超过时间则恢复可用状态，有效的禁止用户在一定的时间内多次点击暴击。

全局化设计防暴击方案，在Vue中创建一个防暴击插件，以Vue.directive()指令的方式实现，在main.js中全局注册，在需要使用的防暴击的控件设置v-preventReClick属性即可。

1、新建.js/ts文件，在Vue项目中创建prevent-repea目录，在里面创建index.js文件。

代码实例如下：

import Vue from 'vue'
const preventReClick = {
    install(Vue) {
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 1000)
                    }
                })
            }
        })
    }
}
Vue.use(preventReClick)

默认防暴击时间1000ms。

2、在项目入口文件main.js/index.js文件引入此文件：

import '@/plugins/prevent-repeat/'

3、在触发点击事件的按钮上直接用指令即可，在控件添加 v-preventReClick="5000"属性，可自定义设置防暴击时间，若不设置时间则默认为1000ms，使用方法如：

<el-button v-preventReClick="5000" class="ebt-search" size="small" type="primary" icon="el-icon-search" @click="xxx">{{ $t('btn_xxx') }}</el-button>

五秒之后按钮下面的事件才可再次触发。

相对于针对单个控件设置setTimeout实现防暴击，使用全局注册方式简化业务逻辑，提炼关键设计思想，做到防暴击全局化，大大提高开发效率。