Vue实现图片预览（放大缩小拖拽）纯手写

快来打我* 2023-01-18 04:03 436阅读 0赞

这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于Ant Design Vue框架的基础上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

这里先分解部分，后面有全部代码

1.需要有黑色背景用于预览背景：

这里的背景要占满整个屏幕（这里的一般是参考其他插件预览的样式进行模拟设计的），样式在后方代码内

2.展示图片并且把图片展示到背景板最中间。

3.最重要的下方的两部分：

滚轮放大缩小图片：

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
          }
        },

这里的test和classStyle是作为图片的动态样式，虽然名字起得着急，但是不影响使用

整体实现的功能：

1.  点击图片，可以进行滚轮放大及缩小，
2.  点击后按压左键可进行拖拽查看图片
3.  点击上方的放大及缩小图标也可以进行放大等操作，
4.  点击 x 可关于预览
5.  点击关闭后，恢复大小，避免点击其他照片影响大小

![20210511114707414.png][]

下面是全部实现代码：

<template>
      <a-card style="width: 100%">
        <div>
          <img
            :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 {
      data() {
        return {
          test: '',
          pictShow: false,
          zoomInShow: false,
          params: {
            zoomVal: 1,
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false,
          },
          file: '',
        }
      },
      computed: {
        classStyle() {
          return this.zoomInShow ? 'a1' : 'a2'
        },
      },
      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>

因为具体也是查看了很多博客等资源最后完成的。

其实在代码内有一部分代码：

其实有  preview="0" preview-text="图片" 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了

这里手写预览的原因是这个插件在数量大的情况下是没有反应的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221021/0c8c6cfc032043f7ab337f20cba49a87.png
[20210511114707414.png]: /images/20221021/58ad79e64f0a419397d58ecb1a6c5b88.png