vue项目图片预览v-viewer插件使用

前言：项目管理后台有个需求，管理人员可通过点击进行预览用户上传的图片，因产品对预览的样式之类的要求不高，只需能预览、缩小、放大、旋转、显示图片类名等基本功能即可，所以楼主选择v-viewer插件来实现。

v-viewer插件链接：
https://github.com/mirari/v-viewer#readme

安装配置
npm install v-viewer --save

使用：v-viewer的使用有两种方式，一种是全局使用，直接在main.js中引入，另一种是在要使用的组件引入使用，建议使用第二种方式，性价比更高，也方便

方式一：在全局使用
1、在main.js中引入

import Viewer from 'v-viewer' // 引入js
import 'viewerjs/dist/viewer.css' // 引入css
Vue.use(Viewer) // 默认配置写法

2、在页面中使用

<template>
    <viewer :images="imageList">
       <img v-for="item in imageList" :src="item.url" :alt="item.title" :key="item.url">
    </viewer>
</template>
<script>
export default {
  data() {
    return {
      imageList: [
        {
          url:
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
          title: '寄件方资料-合同'
        },
        {
          url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '收件方资料-发票'
        }
      ]
    }
  }
}
</script>

方式二：在需要的组件中使用
1、无需在main.js文件引入，直接在组件中引入即可

<template>
  <div class="wrap">
    <div style="padding-top:20px;line-height:38px">寄件方</div>
    <viewer :images="imageList" @inited="handleInited">
      <div class="img-wrap">
        <div class="img-item" v-for="(item, index) in imageList" :key="index">
          <div class="img-top">
            <img :src="item.url" :alt="item.title" />
            <div class="img-type" @click="handleShow(index)">图片</div>
          </div>
          <div class="img-bottom">{{ item.title }}</div>
        </div>
      </div>
    </viewer>
  </div>
</template>

<script>
// 引入插件
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'
export default {
  name: 'ViewerUse',
  components: {
    Viewer
  },
  data() {
    return {
      imageList: [
        {
          url:
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
          title: '寄件方资料-合同'
        },
        {
          url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '收件方资料-发票'
        }
      ]
    }
  },
  methods: {
    handleInited(viewer) {
      this.$viewer = viewer
    },
    handleShow(index) {
      // 直接从第一张开始
      // this.$viewer.show()
      // 指定第几张图片
      this.$viewer.view(index)
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  margin: 0 auto;
  width: 680px;
  overflow: hidden;
  padding: 5px;
  .img-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .img-item {
      cursor: pointer;
      width: 120px;
      margin-right: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      .img-top {
        width: 100%;
        height: 120px;
        position: relative;
        border: 1px solid #cdcdcd;
        img {
          width: 100%;
          height: 100%;
        }
        .img-type {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 12px;
          color: red;
          padding: 2px;
          background-color: #fff;
        }
      }
      .img-bottom {
        flex: 1;
        text-align: center;
        font-size: 12px;
        padding: 2px;
      }
    }
  }
}
</style>

后记
1、建议使用方式二，简单便捷
2、可以通过js控制从哪张图片开始预览
this.$viewer.view(index) // 指定第几张开始，index为imageList图片数组集的下标

this.$viewer.show() // 直接从第一张图片开始
3、v-viewer的github链接有中文文档，进入中文文档后，直接拉到底部评论区，看看网友的评论可能会有意外收获哦~~~~