vue实现图片预览放大缩小功能

ImgShow.vue代码如下：

<template>
  <a-card style="width: 100%">
    <div>
      <img
        :width="100"
        :height="100"
        :src="file"
        alt=""
        @click="handlePhotoShow(file)"
        />
    </div>
    <div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)">
      <div class="setting_box">
        <a-icon
          class="setting_zoom"
          v-if="zoomInShow == false"
          type="zoom-in"
          @click="handleZoomIn"
        />
        <a-icon
          color="#fff"
          class="setting_zoom"
          v-if="zoomInShow == true"
          type="zoom-out"
          @click="handleZoomOut"
        />
        <a-icon color="#fff" class="setting_close" type="close" @click="handleClose" />
      </div>
      <img :src="file" alt="" :class="classStyle" :style="test" @mousedown="imgMove" />
    </div>
  </a-card>
</template>
  
<script>
export default {
  name: 'ImgShow',
  props: {
    file: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      test: '',
      pictShow: false,
      zoomInShow: false,
      params: {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false,
      }
    }
  },
  computed: {
    classStyle() {
      return this.zoomInShow ? 'a1' : 'a2'
    },
  },
  created () {
    console.log(this.file, 'this.file')
  },
  methods: {
    // 实现图片放大缩小 
    bbimg() {
      let e = e || window.event
      this.params.zoomVal += e.wheelDelta / 1200
      if (this.params.zoomVal >= 0.2) {
        this.test = `transform:scale(${this.params.zoomVal});`
      } else {
        this.params.zoomVal = 0.2
        this.test = `transform:scale(${this.params.zoomVal});`
        return false
      }
    },
    // 实现图片拖拽
    imgMove(e) {
      console.log('e', e)
      let oImg = e.target
      let disX = e.clientX - oImg.offsetLeft
      let disY = e.clientY - oImg.offsetTop
      console.log('disX', disX)
      document.onmousemove = (e) => {
        e.preventDefault()
        let left = e.clientX - disX
        let top = e.clientY - disY
        this.test = this.test + `left: ${left}px;top: ${top}px;`
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    handleZoomIn() {
      this.zoomInShow = true
    },
    handleZoomOut() {
      this.zoomInShow = false
    },
    handlePhotoShow(file) {
      console.log('file', file)
      this.file = file
      this.pictShow = true
    },
    handleClose() {
      this.pictShow = false
      this.test = `transform:scale(1)`
    },
  },
}
</script>
<style scoped lang="less">
.showImg {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  position: fixed;
  *position: absolute;
  z-index: 20;
  margin: 0 auto;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .setting_box {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    z-index: 999;
    .setting_zoom,
    .setting_close {
      position: absolute;
      z-index: 1000;
      top: 20px;
      color: #fff;
      opacity: 1;
    }
    .setting_zoom {
      right: 50px;
    }
    .setting_close {
      right: 10px;
    }
  }
}
.a1 {
  max-width: 200vw;
  max-height: 180vh;
  position: absolute;
  z-index: 22;
  margin-top: 40px;
  cursor: move;
}
.a2 {
  max-width: 95vw;
  max-height: 90vh;
  position: absolute;
  z-index: 22;
  margin-top: 40px;
  cursor: move;
}
.zoom-box {
  cursor: zoom-in;
}
.photo_box {
  margin: 0 5px 5px 0;
}
</style>

在需要用到图片预览功能的文件中引入：import ImgShow from './ImgShow.vue'

 其中，imgs是图片对应的地址。

效果如图所示：

 点击图片：

 滚动鼠标可以放大缩小。