vue 防止按钮重复点击

vue 防止按钮重复点击

在后台使用过程中，经常会因为按钮重复点击，而造成发送多次重复请求 以下方法可以避免这种情况

在man.js写入一下代码

//重复点击指令  <el-button type="primary" @click="onSubmit" v-preventReClick>查询</el-button> 
v-preventReClick=“1000”
//在按钮上加入v-preventReClick可以达到防止重复提交的目的，v-preventReClick=“1000”为1秒内禁止提交
import preventReClick from './utils/preventRepeatClick.js'
Vue.use(preventReClick);

在utils文件夹里创建preventRepeatClick.js，以下代码是preventRepeatClick.js里的代码

export default {
    install (Vue) {
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if(!el.disabled) {
                        el.disabled = true;
                        setTimeout(() => {
                            el.disabled = false;
                        }, binding.value || 1000);
                    }
                })
            }
        })
    }
}