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

nodejs页面跳转（node跳转页面）

相关推荐

[快修] systemd

harmony学习Text组件基本属性

zabbix安装步骤，zabbix安装部署步骤

统一认证与单点登录（SSO）技术探讨

发表回复