vue3 自定义指令-按钮防连击

除了核心功能默认的内置指令(例如v-model，v-if，v-show)，vue也允许注册自定义指令。初次使用vue3，相对于vue2的小差异难免有些小不适应。针对于项目中需要的按钮防连击自定义了一个指定。记录一下~

首先我们需要了解的是vue2跟vue3中钩子函数的不同

2.x语法
bind - 指令绑定到元素后发生。只发生一次。
inserted - 元素插入父 DOM 后发生。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

3.x语法
created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

知道了这些以后，我们就可以根据自己的需求来自定义指令了

以下是我的需求：

1. 在标签是直接引入就可以使用，例如<el-button v-dbClick>按钮</el-button>,点击这个按钮的时候能够禁用2秒

// 防连击 double click
app.directive('dbClick', {
    mounted(el) {
        el.addEventListener('click', (e: any) => {
            el.disabled = true;
            el.style.cursor = 'not-allowed';
            setTimeout(() => {
                el.disabled = false;
                el.style.cursor = 'pointer';
            }, 2000); // 禁用两秒
        });
    }
});

// 使用
<el-button v-dbClick>按钮</el-button>

2. 最好可以自定义禁用时间，如果不写就禁用2秒

// 防连击 double click
// 接收参数number
app.directive('dbClick', {
    mounted(el, binding) {
        el.addEventListener('click', (e: any) => {
            const timer = binding.value || 2000; //默认2秒
            el.disabled = true;
            el.style.cursor = 'not-allowed';
            setTimeout(() => {
                el.disabled = false;
                el.style.cursor = 'pointer';
            }, timer);
        });
    }
});

// 使用
<el-button v-dbClick>按钮</el-button> //默认禁用两秒
<el-button v-dbClick='1500'>按钮</el-button> // 禁用1.5秒

以上代码可直接copy，如果问题联系我！