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="描述文字">

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

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;
            }
        };
    });
}

复制粘贴，即可解决

 

                

 

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