• 案例

  
  
  动画555.gif

• 下载引入插件

// 下载安装
npm i v-viewer -S
// main.js中引入
import Viewer from 'v-viewer' // 引入js
import 'viewerjs/dist/viewer.css' // 引入css
Vue.use(Viewer)

• 组件中使用

<template>
  <viewer :images="imageList">
    <img class="img-img" v-for="item in imageList" :src="item.url" :alt="item.title" :key="item.url">
  </viewer>
</template>
<script>
export default {
  data () {
    return {
      imageList: [
        {
          url: require('@/assets/image1.png'),
          title: '寄件方资料-合同'
        },
        {
          url: require('@/assets/image2.png'),
          title: '收件方资料-发票'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.img-img {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 0;  //重点  ，把图片的宽高设置成0，缩略图只展示第一张图片
  height: 0;
  &:nth-of-type(1) {
    width: 100px;
    height: 200px;
  }
}
</style>