useClickOutside

useClickOutside 监听点击目标元素外部时执行某个回调函数，点击事件也可以自定义，可以是其它的鼠标事件

基础用法

<template>
    <div ref="target" style="width: 100px; height: 100px; border: 1px #ccc solid">Hello world</div>

    <div>点击外面</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useClickOutside } from "hooks-vue3";

const target = ref(null);
useClickOutside((event) => console.log(event), [target]);
</script>

API

useClickOutside(() => void, target, eventName);

参数

type Target<T> = T | (() => T) | Ref<T>;

function useClickOutside<T extends keyof DocumentEventMap>(
  onClickAway: (event: DocumentEventMap[T]) => void,
  target: Target<Element | null> | Target<Element | null>[],
  eventName: T | T[] = 'mousedown' as T,
)