vue + vue-router+vue-resource + element-ui+v-viewer实现带图片预览业务功能

ocr智能下单（物流行业）

左边是全览操作区（：本文主角：），包括原始识别图片，右侧是对应的下单表单。示意如下：

实现技术：vue + vue-router+vue-resource + element-ui

核心组件：v-viewer

最终实现效果（实现技术vue）

实现思路

由于业务要求，需要实现图片缩放，旋转，移动图片，上一张/下一张等功能，活脱脱一个预览组件的功能！通过在网上疯狂搜索各种预览组件，最后目标锁定在了v-viewer（一个广泛使用的vue前端预览组件），其预览效果：

很明显，v-viewer自带的按钮组根本无法满足业务需求。但是根据ocr智能下单的业务要求，我可以重用其中的缩放/旋转/移动等功能，只是需要自定义样式实现。

实现步骤s

全局引入v-viewer

这里关键在于不用v-viewer自带的按钮组。后续通过自定义样式实现满足业务要求的按钮组。

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  'inline': true,
  'button': false, // 右上角按钮
  'navbar': false, // 底部缩略图
  'title': false, // 当前图片标题
  'toolbar': false, // 不用v-viewer自带按钮组
  'tooltip': true, // 显示缩放百分比
  'movable': true, // 是否可以移动
  'zoomable': true, // 是否可以缩放
  'rotatable': true, // 是否可旋转
  'scalable': false, // 是否可翻转
  'transition': true, // 使用 CSS3 过度
  'fullscreen': false, // 播放时是否全屏
  'keyboard': false, // 是否支持键盘
  'url': 'data-source',
  ready: function (e) {
    console.log(e.type, '组件以初始化')
  },
  show: function (e) {
    console.log(e.type, '图片显示开始')
  },
  shown: function (e) {
    console.log(e.type, '图片显示结束')
  },
  hide: function (e) {
    console.log(e.type, '图片隐藏完成')
  },
  hidden: function (e) {
    console.log(e.type, '图片隐藏结束')
  },
  view: function (e) {
    console.log(e.type, '视图开始')
  },
  viewed: function (e) {
    console.log(e.type, '视图结束')
    // 索引为 1 的图片旋转20度
    if (e.detail.index === 1) {
      this.viewer.rotate(20)
    }
  },
  zoom: function (e) {
    console.log(e.type, '图片缩放开始')
  },
  zoomed: function (e) {
    console.log(e.type, '图片缩放结束')
  }
})

引用viewer组件

这里关键在于***@inited=“inited”***。可以通过该回调函数inited的参数拿到viewer实例，然后就可以通过该viewer实例调用对应的缩放/旋转/移动等功能。

   <viewer ref="viewer" @inited="inited" :images="currentImages" style="height: 450px;">
            <div v-for="item in currentImages" :key="item.ocrRecognizeRecordId">
              <img :src="item.picUrl" height="100">
            </div>
    </viewer>

inited回调

    inited (viewer) {
      this.currentViewer = viewer
    },

通过该viewer实例调用对应的缩放/旋转/移动等功能

    handleRotateClick (value) { // 旋转
      this.currentViewer && this.currentViewer.rotate(value || this.form.rotate)
    },
    handleZoomInClick (value) { // 放大
      this.currentViewer && this.currentViewer.zoom(value || this.form.zoom)
    },
    handleZoomOutClick (value) { // 缩小
      this.currentViewer && this.currentViewer.zoom(value || this.form.zoom)
    },

源码地址：

抱歉，暂不提供地址。若有同类实现需求者，请评论提问。后续会补上git地址。

技术参考：

1: https://blog.csdn.net/guozhangqiang/article/details/82251893
2: https://www.npmjs.com/package/v-viewer