You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
859 B
32 lines
859 B
2 years ago
|
/**
|
||
|
|
* Prevent repeated clicks
|
||
|
|
* @Example v-repeat-click="()=>{}"
|
||
|
|
*/
|
||
|
|
import { on, once } from '@/utils/domUtils'
|
||
|
|
import type { Directive, DirectiveBinding } from 'vue'
|
||
|
|
|
||
|
|
const repeatDirective: Directive = {
|
||
|
|
beforeMount(el: Element, binding: DirectiveBinding<any>) {
|
||
|
|
let interval: Nullable<IntervalHandle> = null
|
||
|
|
let startTime = 0
|
||
|
|
const handler = (): void => binding?.value()
|
||
|
|
const clear = (): void => {
|
||
|
|
if (Date.now() - startTime < 100) {
|
||
|
|
handler()
|
||
|
|
}
|
||
|
|
interval && clearInterval(interval)
|
||
|
|
interval = null
|
||
|
|
}
|
||
|
|
|
||
|
|
on(el, 'mousedown', (e: MouseEvent): void => {
|
||
|
|
if ((e as any).button !== 0) return
|
||
|
|
startTime = Date.now()
|
||
|
|
once(document as any, 'mouseup', clear)
|
||
|
|
interval && clearInterval(interval)
|
||
|
|
interval = setInterval(handler, 100)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default repeatDirective
|