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

习宸
2023-12-01

如果是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)
      }
      )
})
 
 类似资料: