引入

npm install vue-photo-preview --save

在入口文件中注册

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

使用

使用proview对不同图片进行分组，相同preview会在同一个预览中显示，large来设置预览图片不设置则使用src

<!-- 分组1只显示一个图片 -->
<img large="url1" src="thumbUrl" preview="0" preview-text="图片0"/>

<!-- 分组2同时显示两个图片轮播 -->
<img large="url2" src="thumbUrl" preview="1" preview-text="图片2"/>
<img large="url3" src="thumbUrl" preview="1" preview-text="图片3"/>

<img large="url4" src="thumbUrl" preview="2" preview-text="图片4"/>

刷新数据

如果数据来源是动态的，获取数据后需要调用方法刷新

this.$previewRefresh()