Vue自定义指令实现按钮禁用

自定义v-disabled指令，点击按钮后可以禁用一段时间。在一定程度上能够代替防抖，且使用更简单。

一 技术栈

本文以Vue3和element plus为例，其它技术栈大同小异，稍作修改即可。

二 封装思路

1、利用原生JS给button添加disabled属性。

2、给button添加elment plus 的is-disabled类，实现CSS的禁用效果。

3、设置定时器，一段时间后取消禁用。

核心代码：

function cb(el, binding) {
    // 实现按钮禁用
    el.disabled = true
    // 增加 elementUI 的禁用样式类
    el.classList.add('is-disabled')
    // 解除 disabled
    // 可以通过 v-disabled=2000，指定禁用2000毫秒，默认禁用1000毫秒
    setTimeout(() => {
        el.classList.remove('is-disabled')
        el.disabled = false