vue防止用户多次触发按钮

如何防止用户多次触发按钮？

在点击按钮时，经常会在点击了一次后，发现页面没有反应，去多次触发该按钮，导致接口频繁请求的错误，那么该如何解决呢？

1.使用全局自定义指令的方式

1. 新建文件：src/utils/directive.js

//全局自定义指令
import Vue from 'vue';

const preventReClick = Vue.directive('preventReClick',{
    inserted:function(el,binding,vNode,oldNode){
    	//console.log(binding.value); // 3000
        el.addEventListener('click',()=>{
            if(!el.disabled){
                el.disabled = true;
                setTimeout(()=>{
                    el.disabled = false;
                },binding.value || 1000); //可以传值，或默认为1000
            }
        })
    }
})

export {
    preventReClick
}

2. 在main.js文件中引入

import { preventReClick } from '@/utils/directive.js';
Vue.use(preventReClick);

3. 在页面中使用该自定义指令

<el-button type="danger" size="mini" @click="handleBack()" v-preventReClick="3000">返回</el-button>

这样就可以3s内只触发一次，不再频繁触发按钮，且设置一处，全局页面都可以使用该自定义指令

2.设置button的disable属性值

动态设置button的disable的属性值