useClickOutside 点击元素外部

• 点击对应组件之外的区域，触发事件。
• unmounted 和 deactivated 时自动解绑。

基础使用

import { ref } from 'vue'
import { useClickOutside } from '@mid-vue/shared'

export default {
  setup() {
    // 使用getElementById 获取元素上绑定 事件
    useClickOutside(document.getElementById('app')!, () => {
      console.log('click outside')
    })
  },
}

支持vue3的 Ref

import { ref } from 'vue'
let domRef = ref<HTMLElement>()
useClickOutside(domRef, () => {
  console.log('click outside')
})

取消事件监听

useEventListener 会返回一个 stop ,cancel函数，调用该函数可以取消事件监听。

import { ref } from 'vue'
import { useEventListener } from '@vant/use'

export default {
  setup() {
    let { cancel.stop } = useClickOutside(domRef, () => {
      console.log('click outside')
    })
  },
}

Options

名字	描述	类型	Default
target	绑定事件的元素	Document , HTMLElement , Ref	window