vue项目引入照片查看器

根据产品的要求。不必须做成完全一模一样但也得差不多，主要是我不太会啊，所以在网上找了好久，试了两个总结如下，

第一种：

1、安装：npm install --save vue-preview

2、在main.js中引入：

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

3、使用：

<vue-preview :slides="imgList"></vue-preview>
imgList: [
    {
        src: 'https://xxx.jpg',
        msrc: 'https://xxx.jpg',
        alt: 'picture1',
        title: 'Image Caption 1',
        w: 600, // 设置图片的宽高,单位px
        h: 400
    },
    {
        src: 'https://xxx.jpg',
        msrc: 'https://xxx.jpg',
        alt: 'picture2',
        title: 'Image Caption 2',
        w: 1200,
        h: 900
    }
],

 第二种：

1、安装：npm install --save v-viewer

2、在main.js中引入：

Vue.use(Viewer, {
  defaultOptions: {
      zIndex: 9999,
      title:false,//    显示当前图片的标题
      scalable:false,//图片是否可翻转
      rotatable:false,//图片是否可旋转
      tooltip:false,//显示缩放百分比
      // navbar:false,//显示缩略图导航
      loop:false,
      loading:false
  }
})

3、使用：

<viewer :images="dataDisposed.imgList" class="preview">
    <img v-for="(src, index) in dataDisposed.imgList" :src="src" :key="index" width="50" height="40px" />
</viewer>

其中dataDisposed.imgList必须是数组

第一种的弊端是必须要设置大图的大小，如果遇到每张图片大小不一的情况，强行设置宽高图片就会变形。第二种刚好避免了这种事情发生。所以我最后采用了第二种。