新人报道！！！！
import { ref, onMounted, onUnmounted } from 'vue'
export default ()=>{
const clickOutSide=()=>{
// 用于存储点击事件监听器
//这里为何使用ref无法获得getBoundingClientRect?
const div = document.getElementById("myInfo")
let clickHandler:any = null
onMounted(() => {
const getDivRect = () => {
if(div){
// console.log("myref", myref.value)
return div.getBoundingClientRect()}
}
// 点击事件处理函数
clickHandler = (event:any) => {
const rect = getDivRect()
const x = event.clientX
const y = event.clientY
if (x < rect!.left || x > rect!.right || y < rect!.top || y > rect!.bottom) {
console.log('点击了div区域外')
}
}
// 添加事件监听器
document.addEventListener('click', clickHandler, {
passive: true // 使用被动模式以提高性能
})
})
onUnmounted(() => {
// 移除事件监听器
if (clickHandler) {
document.removeEventListener('click', clickHandler)
}
})
}
return {
clickOutSide
}
}
