设置在一个页面显示详情页并且设置遮罩层

在Vue中的一个小事例

• 第一步：布局好第一个页面显示，并且在页面上显示一张图片(我的页面显示三张图片)

Css

  .common-form-img {
    width: 29%;
    /*border: 1px solid #ffffff;*/
    height: 200px;
    float: left;
    margin-left: 28px;
    margin-left: 3%;
  }
 .imgs {
    width: 100%;
    height: 100%;
    margin-left: 3%;
    transition: all 0.6s;
  }

*第二步：设置好一个带有遮罩层的页面，让第一页点击图片进入，然后把放大的图片显示到页面的中间位置

@click.stop="showBigImg =!showBigImg"
显示放大图片之后再次点击，图片消失返回历史页面

Css

.imgMask {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.5);
   z-index: 99;
 }

 .showImg {
   position: fixed;
   left: 50%;
   top: 50%;
   /*width: 1200px;*/
   height: 460px;
   transform: translate(-50%,-50%);
   transition: all .3s;
   z-index: 100;
 }
 .bigImg {
   position: relative;
 }

*第三步：写相关的js，实现整个功能看效果

data (){
    return {
  //存放图片
        imgList: [],
 //图片放大
        showBigImg: false,
       num: 0,
  }
}
methods  : {
  select(index) {
        this.showBigImg = true;
        this.num = index;
      },
}

效果：

image.png

点击之后：

image.png

等再次点击则消失