39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import type { ObjectDirective } from 'vue'
|
|
|
|
export const clickOutside = {
|
|
beforeMount(element, binding) {
|
|
element.setDragging = () => {
|
|
!element.hasAttribute('data-dragging') &&
|
|
element.setAttribute('data-dragging', true)
|
|
}
|
|
element.clearDragging = () => {
|
|
element.removeAttribute('data-dragging')
|
|
}
|
|
element.clickOutsideEvent = (e: MouseEvent) => {
|
|
if (
|
|
!(
|
|
element === e.target ||
|
|
element.contains(e.target) ||
|
|
element.hasAttribute('data-dragging')
|
|
)
|
|
) {
|
|
binding.value(e)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('touchstart', element.clearDragging)
|
|
document.addEventListener('touchmove', element.setDragging)
|
|
document.addEventListener('touchend', element.clickOutsideEvent)
|
|
document.addEventListener('mousedown', element.clearDragging)
|
|
document.addEventListener('mousemove', element.setDragging)
|
|
document.addEventListener('mouseup', element.clickOutsideEvent)
|
|
},
|
|
unmounted(element) {
|
|
document.removeEventListener('touchstart', element.clearDragging)
|
|
document.removeEventListener('touchmove', element.setDragging)
|
|
document.removeEventListener('touchend', element.clickOutsideEvent)
|
|
document.removeEventListener('mousedown', element.clearDragging)
|
|
document.removeEventListener('mousemove', element.setDragging)
|
|
document.removeEventListener('mouseup', element.clickOutsideEvent)
|
|
},
|
|
} satisfies ObjectDirective
|