nodejs页面跳转(node跳转页面)

我们在写弹窗的时候,免不了需要写一些边边角角的弹窗,什么样子呢?

这个是公众号后台页面,我也要实现同样的功能,当鼠标点击头像的时候,这个信息弹窗会显示出来。再点击其他空白区域的时候信息弹窗消失。
这个问题之前困扰了我很久,找了几次也没找到解决方案。最近看到了一个属性 Node.contains
MDN 的解释为:Node.contains()返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。
哦 … 可以判断是否包含节点,这样就有思路了。我们需要当前节点的 Node ,然后每次点击的时候把点击的 Node 传进去就 OK 了。
来放一下真实的代码:
HTML
<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>
Vue + TS
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)
as HTMLElement 是 TS 里的类型断言。如果不是 TS 页面,可以直接省略掉。
点击关注公众号,查看更多 Vue 的内容

图片授权基于 www.pixabay.com 相关协议

原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34610.html

(0)
小道研究的头像小道研究
上一篇 2024年4月9日
下一篇 2024年4月9日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注