vue2.0在PC端图片放大预览，始终保持在浏览器中间位置操作

通常放大图片预览无非是加一个遮罩层，然后让图片以一定的宽高显示。但是在实际中我们可能有像试卷一样每道题都有图片，只要点击都能预览，由于题很多，可就很难保证图片永远在可视区域中间位置显示，所以我们得通过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;
			},
    
        },
    }

效果：