vue实现图片的拖拽预览和放大缩小

html

<div class="img-preview" v-else-if="fileType === 'image'" ref="imgPreviewRef">
      <img :src="src" alt ref="imgRef" :style="`transform:scale(${imgScaleSize})`" />
    </div>
    <div class="img-opt-btn">
      <el-button class="imgButton" size="small" type="primary" icon="el-icon-minus" circle @click="imgReduce"></el-button>
      <el-button class="imgButton" size="small" type="primary" icon="el-icon-plus" circle @click="imgAmplify"></el-button>
</div>

data

      // 初始点击X
      initX: 0,
      // 初始点击Y
      initY: 0,
      imgScaleSize: 1.0,
      imgContentEl: null

method

    // 鼠标点击事件
    handleMouseDown (e) {
      e.preventDefault()
      e.stopPropagation()
      const imgEl = this.$refs.imgRef

      this.initX = e.pageX - imgEl.offsetLeft
      this.initY = e.pageY - imgEl.offsetTop
      this.imgContentEl.addEventListener('mousemove', this.handleMousemMove)
    },

    // 鼠标移动事件
    handleMousemMove (e) {
      e.preventDefault()
      e.stopPropagation()
      const imgEl = this.$refs.imgRef
      if (this.initX) {
        imgEl.style.left = (e.pageX - this.initX) + 'px'
        imgEl.style.top = (e.pageY - this.initY) + 'px'
        this.imgContentEl.addEventListener('mouseup', this.handleMouseUp)
      }
    },

    // 鼠标松开事件
    handleMouseUp (e) {
      e.preventDefault()
      e.stopPropagation()
      this.initX = 0
      this.initY = 0
      const imgEl = this.$refs.imgRef
      console.log('输出左右', imgEl.style.left, imgEl.style.top)
    },

    // 缩小
    imgReduce () {
      if (this.imgScaleSize === 1.0) {
        return
      }
      this.imgScaleSize -= 0.1
    },

    // 放大
    imgAmplify () {
      this.imgScaleSize += 0.1
    },

控制弹框显示的函数内

if (!this.imgContentEl) {
    this.imgContentEl = this.$refs.imgPreviewRef
}
this.imgContentEl.addEventListener('mousedown', this.handleMouseDown)
// 在mounted也加上也可以，看你们是用v-if判断还是v-show判断

  .img-preview {
    position: relative;
    overflow: hidden;
    width: 1000%;
    height: 1000%;
    img {
      position: absolute;
    }
  }

  .img-opt-btn {
    position: fixed;
    z-index: 88;
    right: 30%;
    bottom: 78px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    transform: translateX(-10%);
  }

记得在最外层包裹层加上posotion:relative来给操作按钮定位，css定位这些还是你们自己微调把！