iview Table表格 + vue-viewer 实现点击表格中的图片进行对图片的预览

想要实现点击表格中render函数展示的小的图片，可以完成一个图片预览放大的效果，那么有几种办法实现，一个是自己写一个Modal组件，然后使用插槽slot，在render函数中设置一个on:{ }，里面去添加点击事件，然后去获取图片的src地址，再去加入到Modal中去，还有其他的方法就是使用插件去解决，这种方式也是最快捷的。

预览效果

点击预览表格中的照片.gif

官方文档地址：Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari's Blog

1、npm安装

npm install v-viewer --save

然后全局引入到main.js中去

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

2、main.js中注册

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' }
})

3、基本使用

大致的语法：

 h('xxxx', {
       props: {
           trigger: 'hover',
           placement: 'top',
           content: '隐患照片'
    }
 }, [
               
     
 ])

第一个参数是标签，第二参数是标签里面可以含props(vue的v-bind)或者是style，也可以包含属性。第三个参数是数组，表示子标签。子标签也是这种格式的，以此递归下去。

4、render函数中的使用

4.1、render函数中展示不同的照片，点击进行预览

{
        title: "票据",
        key: "billImgs",
        align: 'left',
        width: '300',
        render: (h, params) => {
          if (params.row.billImgs) {
            return h("viewer", {
                style: {
                  display: 'flex',
                  justifyContent: 'flex-start',
                  alignItems: 'center'
                }
              },
              params.row.billImgs.split(',').map(item => {
                return [h("img", {
                  style: {
                    height: "45px",
                    width: '45px',
                    margin: "8px 5px"
                  },
                  attrs: {
                    src: item
                  }
                })]
              })
            );
          }
        }
      },

多张图片点击就需要ES6的map或者filter函数将不同的照片地址过滤为一个数组。

4.2、render函数中只有一张照片点击进行预览

      {
        title: "隐患照片",
        key: "dangerPhoto",
        align: 'left',
        render: (h, params) => {
          return h('viewer', [
            h('img', {
                style: {
                  height: "45px",
                  width: '45px',
                  margin: "8px 5px"
                },
                attrs: {
                  src: params.row.dangerPhoto.split(',')[0]
                }
              }
            )
          ])
        }
      },