<div class=\\\"header-right-sub\\\" ref=\\\"headerRightSubBox\\\">
<div class=\\\"header-right-text\\\" @click.prevent=\\\"showModelFn\\\">显示菜单</div>
<ul class=\\\"header-right-sub-box\\\" v-if=\\\"isShowModel\\\">
<li>个人信息</li>
<li>通知中心</li>
<li>退出</li>
</ul>
</div>
const isShowModel = ref(false)// 是否显示 弹出窗
const isContains = ref(true)// 是否是后代节点
const headerRightSubBox = ref<null | HTMLElement>(null)// 声明 DOM 元素
// 显示和隐藏登录窗
const showModelFn = () => {
isShowModel.value = !isShowModel.value
}
// 判断是否是后代节点方法
const handler = (e: MouseEvent) => {
if (headerRightSubBox.value) {
// 是否包含在自定义的 DOM 中 - 就这一句最重要。
if (headerRightSubBox.value.contains(e.target as HTMLElement)) {
isContains.value = true
} else {
isContains.value = false
}
}
}
// 监听数据变化
watch(isContains, () => {
// 当弹窗在显示的时候,并且点击的区域不在自定义节点的后代
if (isShowModel.value && !isContains.value) {
isShowModel.value = false
}
})
onMounted(() => {
document.addEventListener(\\\'click\\\', handler)
})
onUnmounted(() => {
document.removeEventListener(\\\'click\\\', handler)
})
return {
isShowModel,
showModelFn,
headerRightSubBox
}
headerRightSubBox.value.contains(e.target as HTMLElement)
原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34610.html