自定义开发popup点击非popup区域关闭popup

自定义开发popup弹窗组件点击非popup区域关闭popup

如果是vue项目在vue的生命周期onMounted方法里面添加如下代码:

onMounted(async ()=>{
await nextTick()
document.addEventListener('click', (e) => {
        let target = e.target
        if (!target) return
        const hooSearch = target && target.getAttribute('id')
        // 点击的目标元素不需要关闭的return
        if (hooSearch === 'hoo-search') return
        while (target) {
          target = target.parentNode ? target.parentNode : ''  //不断取父节点来替换target
          const id = target && target.getAttribute && target.getAttribute('id')
                  // 点击的目标元素不需要关闭的return
          if (id === 'fund-pool-popup') {
            return
          }
        }
        //发送关闭popup事件
        this.$emit('update:visible', false)
      }
      )
})
 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值