通常放大图片预览无非是加一个遮罩层,然后让图片以一定的宽高显示。但是在实际中我们可能有像试卷一样每道题都有图片,只要点击都能预览,由于题很多,可就很难保证图片永远在可视区域中间位置显示,所以我们得通过js做一些处理:
.img-show-mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 3000;
background: rgba(0, 0, 0, .5);
}
.img-show-mask .bigImg {
width: 500px;
height: 280px;
position: absolute;
z-index: 3100;
top: 0;
left: 0;
margin: auto;
}
<div class="img-show-mask" id="img-show-mask" v-show="maskBtn" @click="closeBigImg"><img :src="bigImgSrc" class="bigImg" id="bigImg" /></div>
export default {
data() {
return {
maskBtn:false,
}
},
mounted: function () {
},
methods: {
bigImgShow: function(url) { //打开图片预览
this.bigImgSrc = url;
this.maskBtn = true;
this.$nextTick(function() {
var imgShowMask = document.getElementById('img-show-mask');
var img = document.getElementById('bigImg');
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
var offsetY=window.pageYOffset;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
imgShowMask.style.height=scrollHeight+'px';
img.style.left=(w/2-250)+'px';
img.style.top=(h/2-70+offsetY)+'px';
});
},
closeBigImg: function() { //关闭图片预览
this.maskBtn = false;
},
},
}
效果: