2022-03-25 15:35:56 +08:00
|
|
|
import type { DirectiveBinding, ObjectDirective } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
|
2022-07-21 18:15:57 +08:00
|
|
|
const RepeatClick: ObjectDirective = {
|
2021-09-09 19:41:10 +08:00
|
|
|
beforeMount(el: HTMLElement, binding: DirectiveBinding) {
|
2022-07-21 18:15:57 +08:00
|
|
|
let interval: ReturnType<typeof setInterval> | null = null
|
2022-07-21 16:22:50 +08:00
|
|
|
let isHandlerCalled = false
|
|
|
|
|
2020-09-16 14:49:21 +08:00
|
|
|
const handler = () => binding.value && binding.value()
|
2022-07-21 16:22:50 +08:00
|
|
|
|
2020-09-16 14:49:21 +08:00
|
|
|
const clear = () => {
|
2022-07-21 18:15:57 +08:00
|
|
|
clearInterval(interval!)
|
2020-09-16 14:49:21 +08:00
|
|
|
interval = null
|
2022-07-21 16:22:50 +08:00
|
|
|
|
|
|
|
if (!isHandlerCalled) {
|
|
|
|
handler()
|
|
|
|
}
|
|
|
|
isHandlerCalled = false
|
2020-09-16 14:49:21 +08:00
|
|
|
}
|
|
|
|
|
2022-07-21 18:15:57 +08:00
|
|
|
el.addEventListener('mousedown', (e: MouseEvent) => {
|
|
|
|
if (e.button !== 0) return
|
2022-07-21 16:22:50 +08:00
|
|
|
|
2022-07-21 18:15:57 +08:00
|
|
|
document.addEventListener('mouseup', clear, { once: true })
|
2022-07-21 16:22:50 +08:00
|
|
|
|
2022-07-21 18:15:57 +08:00
|
|
|
clearInterval(interval!)
|
2022-07-21 16:22:50 +08:00
|
|
|
interval = setInterval(() => {
|
|
|
|
isHandlerCalled = true
|
|
|
|
handler()
|
|
|
|
}, 100)
|
2020-09-16 14:49:21 +08:00
|
|
|
})
|
|
|
|
},
|
2022-07-21 18:15:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default RepeatClick
|