安装
npm install vue-photo-preview --save
main.js引入
```swift
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)
options的配置
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: false, //控制是否显示左上角图片数量按钮
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true, //点击图片应关闭图库，仅当图像小于视口的大小时
indexIndicatorSep: ' / '//图片数量的分隔符
}
更多option配置项，见：https://photoswipe.com/documentation/options.html
使用
<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">
同一组预览的图片里面preview值相同为同组图片。preview-text为预览时下方描述文字。 img的src默认为缩略图，如不填写large，则展示src。若有large，则显示large大图
注意事项
1.如果图片的动态数据需要再获取数据后加上下面这句
this.$previewRefresh();
2.手机自带返回键的页面到了上一页，图片预览却没有关闭，在mounted里面加下面代码
this.$preview.on('imageLoadComplete', (e, item) =>{
let _preview = this.$preview.self;
let lookUrl = window.location.href + '&look';
window.history.pushState(null, null, lookUrl);
_preview.listen('close',
function() {
if (window.location.href.indexOf('&look') !== -1) {
window.history.back();
}
});
window.onhashchange = function() {
if (_preview !== null && _preview !== undefined) {
_preview.close();
_preview = null;
}
};
});
