• 案例

  
  
  動(dòng)畫(huà)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: '收件方資料-發(fā)票'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.img-img {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 0;  //重點(diǎn)  ，把圖片的寬高設(shè)置成0，縮略圖只展示第一張圖片
  height: 0;
  &:nth-of-type(1) {
    width: 100px;
    height: 200px;
  }
}
</style>