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>

作为一个实习生还在学习中,及时记录自己遇到的或大或小的知识点,这篇文章我会在在丰富一下,希望对大家有所帮助。
分割线----------------------------------------------

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页