useClickOutside

点击外部检测Hook

前置依赖

依赖参数

参数名	类型	说明
deps.vue.onMounted	(fn: () => void) => void	Vue的onMounted钩子
deps.vue.onUnmounted	(fn: () => void) => void	Vue的onUnmounted钩子
deps.addEventListener	Document['addEventListener']	添加事件监听器
deps.removeEventListener	Document['removeEventListener']	移除事件监听器

使用示例

import { ref, onMounted, onUnmounted } from 'vue'
import { useClickOutside } from 'zcw-shared/hooks/useClickOutside'

const menuRef = ref<HTMLElement>()
const isOpen = ref(true)

useClickOutside(
  menuRef,
  () => {
    isOpen.value = false
  },
  {
    vue: { onMounted, onUnmounted },
    addEventListener: document.addEventListener.bind(document),
    removeEventListener: document.removeEventListener.bind(document)
  }
)