react实现简单的遮罩层
这是一种常见的效果,一般为了突出显示内容时会被用到。例如下面的我所写的效果我希望点击后,我可以将剩余的部分填充为黑色(遮罩层)。实现它不算太难,难在高度适应性。
我记录一下我的实现 ps?:这里是部分代码,因为是实际项目中,所以内容较少,过后会继续补充~
css部分
.mask{
background: rgba(0,0,0,0.4) !important;
z-index: 10;
height: 100vh;
position: fixed;
width: 100vw;
}
.selectMask_box{
background: rgba(0,0,0,0);
transition: all .2s linear
}
目前做的项目是基于react移动端的,我会在state内定义dateSelected这一属性的bool值,每点击一次我就会取反,以此来判断是显示还是隐藏。
js部分
handleMask=()=>{
this.setState({
dateSelected: !this.state.dateSelected
})
}
<div
onClick={this.handleMask}
className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} >
//这里是待展示的内容,<div>...</div>
//你可以自己设置dataSelected的初始值,同时请注意注意三元运算的顺序。
</div>
作为一个实习生还在学习中,及时记录自己遇到的或大或小的知识点,这篇文章我会在在丰富一下,希望对大家有所帮助。
分割线----------------------------------------------