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

復制粘貼，即可解決

 

                

 

   歡迎掃碼加群，一起討論，共同學習成長！