【Vue3】 自定义指令防止重复点击（防抖）

1. 新建 preventReClick.js 文件 (我放在plugins中的)

export default (app) => {
    app.directive("preventReClick", {
        mounted(el, binding) {
            el.addEventListener("click", () => {
                if (!el.disabled) {
                    el.disabled = true;
                    setTimeout(() => {
                        el.disabled = false;
                    }, binding.value || 2000);
                }
            });
        },
    });
};

2. main.js 文件

......
// 注册指令
import preventReClick from "./plugins/preventReClick";

app.use(preventReClick);
......

3. 使用

// v-preventReClick
<el-button 
    @click="save" 
    v-preventReClick 
    type="success" 
    >保存</el-button>