【前端小技巧】不同组件中如何实现点击空白关闭自定义的弹窗

直接上代码吧

---

处理函数
closest的参数是弹窗的类名

const handleClickOutside = (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    if (!target.closest('.popUpClassName')) {
    	//控制弹窗显示隐藏的变量
        ispopup.value = false;
    }
};

绑定到document上

    document.addEventListener('click', handleClickOutside);

记得在无用的时机移除

  document.removeEventListener('click', handleClickOutside);