useClickOutside Composable
Detect clicks outside a target element with cleanup and event options
Code
import { onMounted, onUnmounted, type Ref } from 'vue';
export function useClickOutside(
target: Ref<HTMLElement | null>,
callback: (event: MouseEvent | TouchEvent) => void,
options: { capture?: boolean; passive?: boolean } = { capture: true, passive: true }
) {
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
__TOKEN_16__ (!target.value) return;
__TOKEN_18__ (!target.value.contains(event.target as Node)) {
callback(event);
}
};
onMounted(() => {
document.addEventListener('click', handleClickOutside, options);
document.addEventListener('touchstart', handleClickOutside, options);
});
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside, options);
document.removeEventListener('touchstart', handleClickOutside, options);
});
}
// Usage example
// const dropdownRef = ref<HTMLElement | null>(null);
// useClickOutside(dropdownRef, () => {
// isDropdownOpen.value = false;
// });