Vue常用插件移动端图片预览插件vue-photo-preview

# 安装
npm install vue-photo-preview --save

# man.js引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
  fullscreenEl: false
};
Vue.use(preview, options)
Vue.use(preview)

# 页面使用
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">

这里碰到一个问题，当图片预览状态点击手机返回键，直接返回上一个页面，但图片预览未进行关闭，解决如下：

 1 mounted() {
 2     //图片游览按返回键退出游览
 3     this.$preview.on('imageLoadComplete', (e, item) = >{
 4         let _preview = this.$preview.self;
 5         let lookUrl = window.location.href + '&look';
 6         window.history.pushState(null, null, lookUrl);
 7         _preview.listen('close',
 8         function() {
 9             if (window.location.href.indexOf('&look') !== -1) {
10                 window.history.back();
11             }
12         });
13         window.onhashchange = function() {
14             if (_preview !== null && _preview !== undefined) {
15                 _preview.close();
16                 _preview = null;
17             }
18         };
19     });
20 }

复制粘贴，即可解决

欢迎扫码加群，一起讨论，共同学习成长！