iview 使用图片放大关闭 iviewer

安装

npm install v-viewer --save

在main.js里引入

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

Vue.use(Viewer)
Viewer.setDefaults({
  navbar: false, //底部缩略图
  toolbar: false, //底部工具栏
  button: false, //右上角按钮
  title: false, //当前图片标题
  movable: true, //是否可以移动
  zoomable: true, //是否可以缩放
  transition: false //使用 CSS3 过度
})

在vue界面里使用

        {

          title: "抓拍图片",

          key: "deliver",

          render: (h, params) => {

            let _img = params.row.deliver; //因为现在后台返回来的只有一张图片，String类型。

            let imgs = [_img]; //组装成 数组

            if (_img) {

              return h(

                "viewer",

                {

                  props: {

                    images: imgs //数组

                  }

                },

                imgs.map(img => {

                  //循环显示

                  return h("img", {

                    attrs: {

                      src: img,

                      style: "width: 40px;height: 40px;"

                    }

                  });

                })

              );

            } else {

              return h("span", "");

            }

          }

        },