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

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

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

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. 点击关闭后，恢复大小，避免点击其他照片影响大小

 

下面是全部实现代码：

 

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

 

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

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

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