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

Z时代
2024-01-10
分类：综合

vue

# 安装

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 }