# 安装
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 }
复制粘贴，即可解决
欢迎扫码加群，一起讨论，共同学习成长！