VUE3自定义指令防止重复点击多次提交_vue3设置按钮防止重复提

1.需求

vue3项目，新增弹框连续点击确定按钮防止多次提交，在按钮上添加自定义指令

2.实现方式

reClick.ts文件  防止重复点击方法，自定义指令

export default {
    mounted(el: any, binding: any) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
}

index.ts文件 引入多种自定义指令，包括防止重复点击指令

import type { App } from 'vue';
import reClick from './reClick';
//引入其他指令
/**
 * 导出指令方法：v-xxx
 * @methods reClick 防止重复点击，用法：v-reClick
 */
export function directive(app: App) {
	//连续点击指令 v-reClick默认3秒不能联系点击 v-reClick="1000"
	app.directive('reClick', reClick);
}

main.ts全局引入

import App from './App.vue';
import {directive} from '@/directive/index.ts'; //引入自定义指令
 
const app = createApp(App);
directive(app); //全局引入

vue文件使用

<!-- v-reClick 默认3秒内反正重复点击 -->
<el-button v-reClick type="primary" :disabled="loading">确定</el-button>
<!-- v-reClick="1000" 默认1秒内反正重复点击 -->
<el-button v-reClick="1000" type="primary" :disabled="loading">确定</el-button>