问题:在vue中使用vue-photo-preview来对图片进行预览,遇到了一个问题,图片预览和页面处于同一层级,如果点击返回按键,不仅图片未关闭,父页面跳转到了上一层。
主要核心代码:
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;
}
};
});
}
说明几个问题,vue-photo-preview插件官方API的方法都是在this.$preview.on事件发生之后,在里面通过this.$preview.self拿取到的。
附上vue安装vue-photo-preview过程:https://826327700.github.io/vue-photo-preview/