diff --git a/src/main.ts b/src/main.ts index ab39fc6..243d17e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { createApp, Directive, DirectiveBinding } from 'vue'; +import { createApp } from 'vue'; import { createPinia } from 'pinia'; import * as ElementPlusIconsVue from '@element-plus/icons-vue'; import App from './App.vue'; @@ -30,81 +30,4 @@ app.directive('permiss', { }, }); -// 注册自定义指令 v-prevent-reclick -app.directive('prevent-reclick', { - beforeMount(el, binding) { - el.disabled = false; // 初始化时启用按钮 - el.addEventListener('click', (e) => { - el.disabled = true; // 点击后禁用按钮 - setTimeout(() => { - el.disabled = false; // 在指定的时间后重新启用按钮 - }, binding.value || 2000); // 使用 binding.value 来设置等待时间,默认为 2000 毫秒 - }); - }, - unmounted(el) { - // 组件卸载时移除事件监听器 - el.removeEventListener('click'); - }, -}); - -interface ReturnPromiseFn { - (...args: any[]): Promise -} -interface objectType { - fn: ReturnPromiseFn - params?: any[] -} - -const directiveBindingDirective: Directive = { - mounted(el, binding: DirectiveBinding) { - if (!binding.value) { - throw new Error('v-prevent-dup-click must pass a parameter') - } - if (typeof binding.value !== 'function' && typeof binding.value !== 'object') { - throw new Error('v-prevent-dup-click requires a function or an object with a function `fn`') - } - // 一开始是未点击状态 - el.isClicked = false - const handerClick = function (event) { - // 如果已经点击过,则阻止事件 - if (el.isClicked === 'true') { - event.preventDefault() - event.stopPropagation() - return - } - // 标记为已点击 - el.isClicked = 'true' - // 调用传入的函数 - let fn: ReturnPromiseFn - let params: any[] = [] - //如果只传函数名 - if (typeof binding.value == 'function') { - fn = binding.value - } else { - //如果传对象{fn:submit,params:[1,2,3]}或者{fn:submit} - fn = (binding.value as objectType).fn - params = (binding.value as objectType)?.params ?? [] - } - console.log(params, 'params') - try { - fn(...params).finally(() => { - el.isClicked = false - }) - } catch (error) { - throw new Error('binding.value或 binding.value.fn必须是返回Promise类型的函数') - } - } - el.hander = handerClick - el.addEventListener('click', handerClick) - }, - //销毁事件 - beforeUnmount(el) { - if (el.hander) { - el.removeEventListener('click', el.hander) - } - } -} - -app.directive('preventDupClick', directiveBindingDirective) - app.mount('#app');