Vue实现图片的放大缩小

Vue实现图片的放大缩小

 <style>代码

	.mengban{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0, 0.5);
		overflow: scroll;
			img{
				position: absolute;
				top: 20%;
				left: 50%;
				transform:translate(-50%,-12%);
                /*transform: scale(1);*/
                max-width: 800px;
			}
	}
    .imgButton{
        width: 40px;
        height: 40px;
		position: fixed;
        z-index:88;
        top: 80%;
		padding: 0;
	}

 <template>代码 

i-button使用的是iview的

<div>
	<img :src="mengbanSrc" :style="{maxWidth:imgW+'px'}"   ref="bigPic">
	<i-button shape="circle" class="imgButton" style="right: 150px;background-color:red;border:0;color:white;" @click="closeBigMeg"><h1>×</h1></i-button>
	<i-button  shape="circle" class="imgButton" style="right: 100px;border:0;" @click="imgW=imgW+100"><h1>+</h1></i-button>
	<i-button shape="circle" class="imgButton" style="right: 50px;border:0;border-radius: 50%" @click="imgW-100>0?imgW=imgW-100:100"><h1>-</h1></i-button>
</div>

<script>代码

data() {
    return {
        imgW：800
    }
}，
methods: {
    closeBigMeg(){
	    this.isShowMb = false;
	    this.imgW = 800;
    }
}

效果如下：