https://www.h5w3.com/239173.html
https://blog.51cto.com/wjw1014/5411219

效果图： 点击右下角的放大缩小 可以使图片放大缩小

放大缩小 主要是运用style.transform。因为我是封装了一层image的组件 ，在组件中关键代码如下：
setTransform 方法 可以从外层设置 放大缩小的倍数
dropImage 是在根元素上 @mousedown.prevent=“dropImage(arguments[0])”

<el-image
	....
    @mousedown.prevent="dropImage(arguments[0])"
    ref="image"
  >
    <div slot="placeholder">加载中...</div>
  </el-image>


// 放大缩小
  public setTransform (multiples: number) {
    (this.$el as any).style.transform = `scale(${multiples})`;
  }

  // 拖拽
  public dropImage (e: any) {
    if (!e || this.editAble || !this.canDropImage) {
      return;
    }
    this.odiv = this.drawer.$el; // 获取目标元素
    // 算出鼠标相对元素的位置
    const disX = e.clientX - this.odiv.offsetLeft;
    const disY = e.clientY - this.odiv.offsetTop;
    document.onmousemove = (e) => { // 鼠标按下并移动的事件
      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      const left = e.clientX - disX;
      const top = e.clientY - disY;
      // 移动当前元素
      this.odiv.style.left = left + 'px';
      this.odiv.style.top = top + 'px';
    };
    document.onmouseup = (e) => {
      document.onmousemove = null;
      document.onmouseup = null;
      this.$emit('onmouseup', this.odiv.style.left, this.odiv.style.top);
    };
  }

在外层文件中执行这个方法，multiples是值放大倍数；我这里 最大只能放大2倍，具体看实际应用；

// 放大缩小
  private handleBigImage () {
    if (this.multiples >= 2) {
      return;
    }
    this.multiples += 0.25;
  }

  private handleSmallImage () {
    if (this.multiples <= 1) {
      return;
    }
    this.multiples -= 0.25;
  }


@Watch('multiples')
  private multiplesChange() {
    // 调用组件中的setTransform 即可
  }

如果想要同时支持滚轮 在元素上 绑定@mousewheel.prevent=“roller” roller 判断他的滚动方向 然后执行放大缩小即可

@mousewheel.prevent="roller"


 private roller (e: any) {
   e.deltaY > 0 ? this.handleSmallImage() : this.handleBigImage();
 }