一、首先要有一个遮罩层,以及你的所需内容
<div className="cover-container">
<div className="content">
12345
</div>
</div>
二、需要设定遮罩层覆盖页面全范围
.cover-container{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.content{
//需要多大写多大
}
三、功能实现 监听 'click'事件
onKeyDown = (e) => {
e.stopPropagation();
const cover = document.getElementsByClassName("content")[0];
if (cover && !cover.contains(e.target)) {
this.onClose();//关闭页面功能
}
};
componentDidMount() {
setTimeout(() => document.addEventListener("click", this.onKeyDown), 0);
}
componentWillUnmount() {
document.removeEventListener("click", this.onKeyDown);
}