移动端页面图片预览vue-photo-preview

安装

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

使用

同一组预览的图片里面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;

                    }

                };

            });