在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

等再次点击则消失