onClickOutside的使用

onClickOutside是vueuse自带的方法

就是在元素外面点击,执行回调

import { onClickOutside } from '@vueuse/core'

import { ref } from 'vue';

// 格式：onClickOutside(dom元素,回调)

// 作用：当在 {dom元素} 之外点击，执行{回调}

const target = ref(null)

onClickOutside(target, () => {

  close()

})

注解

clock() 是之前注册的点击关闭事件,这里面调用下就行

还有target 是在 dom元素身上注册个 ref='target' 事件

 

它的作用就是 在红框外面任意区域点击关闭