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

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

作者: 晨曦诗雨 | 来源:发表于2018-12-11 12:03 被阅读0次

在Vue中的一个小事例

  • 第一步:布局好第一个页面显示,并且在页面上显示一张图片(我的页面显示三张图片)
 <div class="common-form-img" v-for="(img,index) in imgList" >
              <img class="imgs" v-bind:src="img" @click="select(index)">
            </div>
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;
  }

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

 <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
      <div class="showImg">
        <!--<img class="bigImg" src= "../assets/login-back.jpg">-->
        <img class="bigImg" :src="imgList[num]">
      </div>
    </div>

@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

等再次点击则消失

相关文章

网友评论

      本文标题:设置在一个页面显示详情页并且设置遮罩层

      本文链接:https://www.haomeiwen.com/subject/neushqtx.html