Vue 按钮防重点击效果

import Vue from 'vue'
//directive：注册一个全局的指令 v-preventReClick 
const preventReClick = Vue.directive('preventReClick', {
    //inserted：当被绑定的元素插入进DOM时发生的调用
    inserted: function (el, binding) {
        //el:指令绑定的元素。用来操作DOM  binding：一个对象
        el.addEventListener('click', () => {
        //addEventListener() 方法用于向指定元素添加事件
            if (!el.disabled) {
            //判断当前元素如果不是禁用的状态 
                el.disabled = true //开启按钮禁用
                setTimeout(() => { //加定时器 3秒后把定时器关闭
                    el.disabled = false
                }, binding.value || 3000)
                //binding.value可以自行设置。如果设置了则跟着设置的时间走
                //例：v-preventReClick='2000'
            }
        })
    }
});
 
export { preventReClick }

要在main.js引入写的文件

import preventReClick from '@/utils/plugins.js'```
// 用的时候直接在按钮上加上指令即可

<el-button type="primary" @click="nextSteop" v-preventReClick>登记</el-button>