2025年04月17日17:26:48
This commit is contained in:
parent
b007052673
commit
81a291e6c0
79
src/main.ts
79
src/main.ts
@ -1,4 +1,4 @@
|
|||||||
import { createApp, Directive, DirectiveBinding } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import { createPinia } from 'pinia';
|
import { createPinia } from 'pinia';
|
||||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||||
import App from './App.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<any>
|
|
||||||
}
|
|
||||||
interface objectType {
|
|
||||||
fn: ReturnPromiseFn
|
|
||||||
params?: any[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const directiveBindingDirective: Directive = {
|
|
||||||
mounted(el, binding: DirectiveBinding<ReturnPromiseFn & objectType>) {
|
|
||||||
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');
|
app.mount('#app');
|
||||||
|
Loading…
x
Reference in New Issue
Block a user