防抖节流自定义指令操作系统流程，点击操作，网速过慢，无感知，多次点击按钮，频繁调用接口；体验优化，控制接口频繁调用，防抖

一、问题现象

操作系统流程时，网速过慢，点击【按钮】，页面没有及时反应；用户感知不到，再次点击按钮，系统流程报错。

二、想法

控制按钮操作时的频繁接口调用，通过防抖操作进行处理

三、实现

第一步：封装自定义指令v-debounce

import Vue from 'vue';
//按钮防抖动指令
Vue.directive('debounce', {
    inserted(el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 3 * 1000); // 三秒之内点击不会触发接口调用
            }
        });
    },
});

第二步：在main.js文件中引入文件

import '@/utils/directives.js';

第三步：项目的template中使用

<el-button type="primary" class="change-btns" @click="sendCode()" v-debounce>发送验证码</el-button>