安装依赖

cnpm install --save-dev v-viewer


main.js 引用

import Viewer from 'v-viewer' 
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    title: false, //显示标题
    navbar: false,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      reset: 1,
      oneToOne: 1,
      rotateRight: 1,
      rotateLeft: 1,
    }
  }
})


页面组件中使用，images必须是一个数组，数组内直接放入图片链接即可

<viewer :images="images">                
	<img :src="getObjectURL(value)" />
</viewer>

参考：https://zhuanlan.zhihu.com/p/55117558

最近用到了v-viewer，使用方法：
main.js中配置
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
      button: true,
      navbar: true,
      title: false,
      toolbar: false,
  }
})

table中配置，因为viewer要求必须是list，对数据进行处理
 <el-table-column key="2" prop="s" label="s" width="200">
   <template scope="scope">
     <viewer :images="scope.row.s">
       <img v-for="src in scope.row.s" :src="src" :key="src" width="200"> 
     </viewer>
   </template>
 </el-table-column>

//canvas转图片
toImage() {
        console.log("toImage")
        for (var m in this.MoleData) {
            let canvas = document.getElementById('myCanvas')
            let s = this.MoleData[mole].C
            console.log(canvas)
            console.log(s)
            let options = {
                width: 200,
                height: 130,
                bondThickness: 1,
                atomVisualization: 'default',
                terminalCarbons: true,
                explicitHydrogens: true,
            }
            let smilesDrawer = new SmilesDrawer.Drawer(options)
            SmilesDrawer.parse(smiles, function (tree) {
                smilesDrawer.draw(tree, canvas, 'light', false)
            }, function (err) {
                console.log(err);
            })
            if (canvas) {
            	//此处将原本string数据存放进list中
                var srcList = []
                srcList.push(canvas.toDataURL("image/png"))
                this.MoleData[m].s = srcList
            }
        }
        // console.log(this.MoleData)
      },

调整viewer背景色，默认是透明度50%黑色，根据引入css文件位置，找到node_modules/viewerjs/dist/viewer.css,修改
/* .viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
} */

.viewer-backdrop {
  background-color: rgba(255, 255, 255, 0.8);
}

1.下载v-viewer

npm install v-viewer -S

2.main.js中引入注册


import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
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.封装成组件

ImgPreview.vue

<template>
  <div>
    <viewer
      :options="options"
      :images="images"
      @inited="inited"
      class="viewer"

    >
      <template >
        <img v-for="src in images" :src="src" :key="src" class="images" />
      </template>
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer/src/component.vue'

  export default {
    components: {
      Viewer
    },
    props: {
        images: {
            type: Array,
            default: function () {
            return []
      }
        }
    },
    data () {
        return {
            options: {
                'navbar': false
            }
        }
    },
    created () {
      // console.log(this.images)
    },
    methods: {
    // 这个初始化会在页面初始的时候就执行一次，后续每次传入图片也会自动执行，所有用来转发事件
      inited (viewer) {
        this.$viewer = viewer
        this.$emit('getViewer', viewer)
      }
    }
  }
</script>
<style scoped>
.images{
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>


父组件调用

<template>
  <div>
  
      <a-row>
        <a-col :span="24">
          <a-descriptions bordered>
            <a-descriptions-item
              label="图片"
              :span="3"
            >
              <ImgPreview :images="evaluateUrls" @getViewer="getViewer"></ImgPreview>
            </a-descriptions-item>

          </a-descriptions>
        </a-col>
      </a-row>
  
  </div>
</template>

<script>
import ImgPreview from './ImgPreview.vue'
export default {
  name: 'ResidentDetails',
  components: {
    ImgPreview
  },
  data () {
    return {
     viewer: '',
     evaluateUrls: []//获取需要的图片数据
    }
  },
  methods: {

     getViewer (viewer) {
        if (this.viewer) {
            this.$nextTick(() => {
                viewer.show()
            })
        } else { // 先定义这个变量为空，防止第一次页面加载的时候就出现遮罩层
            this.viewer = viewer
        }
    }
  }
}
</script>

<style lang='less' scoped>

</style>


 

1.安装依赖
npm install v-viewer --save

2.在main.js中引入
import Viewer from 'v-viewer' //图片查看插件
import 'viewerjs/dist/viewer.css'
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.在组件中引用
<van-swipe :autoplay="3000">
		<van-swipe-item v-for="(image, index) in moodsImg" :key="index">
			<viewer :images = "moodsImg" >
				<img :src="image"/>
			</viewer>
		</van-swipe-item>
</van-swipe>

效果