图片点击放大缩小功能实现

图片点击放大缩小功能-基于vue

1.图片标签
要点：
class="img"
@click="handleChangeImg($event)"

 <img class="img"
            @click="handleChangeImg($event)"
            src=" https://img.yzcdn.cn/vant/leaf.jpg"
            alt="">

2.添加方法
在methods里面添加该方法，点击图片的时候会触发。本质其实就是切换图片的类名。

   // 放大缩小问题图片
    handleChangeImg($event) {
      if ($event.currentTarget.className == 'img') {
        $event.currentTarget.className = 'img open'
      } else {
        $event.currentTarget.className = 'img'
      }
    },

3.添加样式
在能对图片样式起作用的地方添加这两个样式，其实就是该图片放大缩小时各自对应的样式，可以根据自己的需求适当改变。

// 放大缩小图片
.img {
  min-width: 200px;
  min-height: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
  max-width: 200px;
  max-height: 200px;
}

.img.open {
  cursor: zoom-out;
  max-width: 500px;
  max-height: 500px;
}

4.图片容器样式
这个是装那个放大缩小图片的容器，为了防止图片放大后样式乱掉，所以这里的高度不建议写死，可以写一个最小高度，当图片放大时样式不至于乱掉，可以针对自己的项目需求进行自定义。

  .problemImg {
    width: 750px;
    min-height: 264px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    margin-left: 30px;
    border-bottom: 1px solid #eee;