在vue中,为表格里的多个图片设置图片查看器,点击放大预览

时间:2020-9-13 作者:admin

一、安装viewerjs依赖:
先npm install viewerjs –save,然后在main.js中写:

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

Vue.use(Viewer)
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    title: false
  }
})

二、在表格的Columns的某个列写(接口返回的resultAnswer中如果有图片的话,以img标签呈现):

{
          title: '答案',
          minWidth: 170,
          key: 'resultAnswer',
          align: 'center',
          render: (h, params) => {
            if (params.row.resultAnswer && params.row.resultAnswer.indexOf('img') === -1) {// 没图片
              return h('div', {
                domProps: {
                  innerHTML: params.row.resultAnswer
                }
              })
            } else if (params.row.resultAnswer && params.row.resultAnswer.indexOf('img') !== -1) {// 有图片
              var contentArr = []
              var srcArr = this.getImg(params.row.resultAnswer)
              var imgArr = []
              srcArr.forEach((a) => {
                imgArr.push(
                  h('img', {
                    attrs: {
                      src: a,
                      style: 'width: 20px;margin-right:6px'
                    }
                  })
                )
              })
              contentArr.push(
                h(
                  'viewer',
                  {
                    props: {
                      images: srcArr
                    }
                  },
                  imgArr
                )
              )
              return h('div', contentArr)
            }
          }
        }

三、在methods定义getImg方法,获取图片src数组:

getImg (html) {
        var newHtml = []
        // 匹配图片(g表示匹配所有结果,i表示区分大小写)
        var imgReg = /<img.*?(?:>|\/>)/gi
        // 匹配src属性
        var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
        var arr = html.match(imgReg)
        for (var i = 0; i < arr.length; i++) {
          var src = arr[i].match(srcReg)
          // 获取图片地址
          newHtml.push(src[1])
        }
      return newHtml
    }
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。