在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
