vue图片放大缩小：onwheel

1.使用插件

实现图片的放大缩小，可以采用插件。如：

viewerjs（放大和缩小、切换上下张等功能）

vue-photo-preview（放大和缩小、切换上下张等功能）

vue-picture-preview（预览和切换上下张功能）

2.不使用插件

1.给img标签绑定一个id

2.在mounted里写放大缩小的方法

2.1代码截图

 

2.2代码

模板(template)部分：

<img id="pic" width="100%" :src="src" alt="" />

js(script)部分：

mounted

  mounted() {

    let scale = 1;

    pic.onwheel = function (e) {

      if (e.wheelDelta > 0) {

        scale += 0.05;

        pic.style.transform = `scale(${scale})`;

      } else {

        scale -= 0.05;

        pic.style.transform = `scale(${scale})`;

      }

    };

  },