Vue3中点击元素容器外部关闭弹窗或悬浮框
<div
class="float-card"
v-if="item.isShowDropDown">
<ShareUserBox />
</div>
const handleClickOutside = (event) => {
const floatCardDom = document.querySelector('.float-card')
if (
floatCardDom &&
!floatCardDom.contains(event.target)
&& event.target?.title !== '共享'
) {
if(tableData.value.length && tableData.value.some(item => item.isShowDropDown)) {
tableData.value = tableData.value.map(item => {
return {
...item,
isShowDropDown: false
}
})
}
}
}
onMounted(() => {
document.addEventListener('click', handleClickOutside)
})
onBeforeUnmount(() => {
document.removeEventListener('click', handleClickOutside)
})
学而不思则罔,思而不学则殆!