vue实现图片预览放大以及缩小问题

目录

• vue图片预览放大以及缩小
• 关于 viewerjs的使用
• vue实现图片预览(放大缩小拖拽)纯手写
• 滚轮放大缩小图片
• 图片拖拽
• 整体实现的功能
• 总结

vue图片预览放大以及缩小

1.在vue的环境下实现图片放大缩小，可以使用viewerjs

效果图：

关于 viewerjs的使用

1）首先安装依赖

npm i v-viewer --save

2）全局注册（在main.js）以及引用css

//导入图片预览viewer组件以及css
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

关于viewerjs中setDeafaults的配置下面有一张表，大家可以参考一下

这些工作都做完以后，然后可以在components（公共组件）文件下新建一个文件夹，命名看个人习惯，再新建一个以xxx.vue文件（同上，命名不做具体要求看个人习惯）。

在xxx.vue中写入

因为已经全局注册过了，可以直接使用标签 然后这个作为子组件。viewer绑定的一定要为数组，不然是会报错的（避坑）。

当这些都准备好的就可以在“父页面”使用了。

在父页面不要忘了引用以及注册

import viewer from "../../../components/viewer/viewer-preview.vue";
export default {
  name: "business",
  components: { viewer },
}

仅展示了关键代码，其他的data(){ return{   }   }等等按需写入。

注册完以后在需要用到的地方直接写入，数据的都是通过父传子props的方式

因为使用的是table里面的插槽，所以传入的数据为row.iconUrlList.  这样整个工作就算是结束了。

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是作为图片的动态样式，虽然名字起得着急，但是不影响使用

整体实现的功能

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

下面是全部实现代码：

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

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

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。