38 lines
895 B
TypeScript
38 lines
895 B
TypeScript
import { ref, Ref, unref } from 'vue';
|
|
import { useEventListener } from '/@/hooks/event/useEventListener';
|
|
import { isServer } from '/@/utils/is';
|
|
export function useClickOutside<T extends HTMLElement>(
|
|
containerRef: Ref<T>,
|
|
onClickOutside: (e: MouseEvent | TouchEvent) => void,
|
|
eventName = 'click'
|
|
) {
|
|
if (isServer) return;
|
|
|
|
const isTouchRef = ref(false);
|
|
|
|
useEventListener({
|
|
el: document,
|
|
name: 'touchend',
|
|
listener: handler,
|
|
options: true,
|
|
});
|
|
useEventListener({
|
|
el: document,
|
|
name: eventName,
|
|
listener: handler,
|
|
options: true,
|
|
});
|
|
|
|
function handler(e: MouseEvent | TouchEvent) {
|
|
if (e.type === 'touchend') {
|
|
isTouchRef.value = true;
|
|
}
|
|
if (e.type === 'click' && unref(isTouchRef)) return;
|
|
|
|
const el = containerRef.value;
|
|
if (el && e.target && !el.contains(e.target as Node)) {
|
|
onClickOutside(e);
|
|
}
|
|
}
|
|
}
|