如果是点击一张图,弹出一张大图,那自然是简单的,但是如果只在当前区域放大缩小,该怎么做呢?
一、html中事件绑定
<img class="img" :src="{{imgUrl}}" @click="handleChangeImg($event)" />
二、style样式
.img {
display: block;
cursor: zoom-in;
max-width: 300px;
max-height: 200px;
}
.img.open{
cursor: zoom-out;
max-width: 800px;
max-height: 1000px;
}
二、事件
handleChangeImg($event){
if($event.currentTarget.className=='img'){
$event.currentTarget.className='img open';
}else{
$event.currentTarget.className='img';
}
}
这样就搞定了