v-viewer图片预览

安装

npm install v-viewer

引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use (Viewer, {
    defaultOptions: {
        'navbar': true,
        'toolbar': false,
        'movable': false,
        'title': false,
        'zoomable': true,
        'scalable': true,
        'transition': true
    }
})

使用

方法一：组件

<viewer :images="imgList" class="imgClass">
    <div v-for="(item,index) in imgList" :key="index">
        <img :src="item"/>
    </div>
</viewer>

方法二：API

<template>
  <div>
    <button type="button" class="button" @click="preview">preview</button>
  </div>
</template>
<script>
  export default {
    data() {
      imgList: [
        'https://chserver.oss-cn-hangzhou.aliyuncs.com/articles/542fb7ca81f29d177ac1c5918cd4d5ee.png',
        'https://chserver.oss-cn-hangzhou.aliyuncs.com/photos/ca9cd2d535fb610f4ca141cb9bf95d9d.jpg'
      ]
    },
    methods: {
      preview () {
        // 使用`app.use`进行全局安装，直接调用`this.$viewerApi`
        this.$viewerApi({
		  options: {initialViewIndex: 1},
		  images: this.imgList
        })
      }
    }
  }
</script>

效果

原文地址：TT的博客《v-viewer图片预览》

《v-viewer文档地址》