vue使用vue-photo-preview全屏查看图片

安装插件：

npm install vue-photo-preview --save

引入到项目中：

全局引入：
在main.js中引入：

// 图片预览插件 vue-photo-preview
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

使用：

  可直接在img标签内添加preview属性，如果页面内有多个swiper,需要分情况，

  如果所有图片可以一次性预览完毕，preview的属性可以是同一个，如果分几次预览，

  则需要定义不同的preview值
  

// 点击其中一张图片可以向轮播图一样上一张下一张查看其它所有图片
<div class="imgBox">
  <img
    v-for="(item,index) in content.attachmentList"
    :key="index"
    :src="item.fileKey"
    preview="1"
  />
</div>

// 点击其中一张图片只能全屏查看当前这一张图片。没有上一张下一张的按钮
<div class="imgBox">
  <img
    v-for="(item,index) in content.attachmentList"
    :key="index"
    :src="item.fileKey"
    :preview="index"
  />
</div>

web前端交流QQ群：327814892