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

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

预览效果

官方文档地址：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]
                }
              }
            )
          ])
        }
      },