diff --git a/CHANGELOG.md b/CHANGELOG.md index 042e399..fd433d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,4 @@ # 3.1.6 1. 优化拖拽文件夹进行上传的错误提示 2. 优化超出限制大小的错误提示 +3. 修复图片预览的已知错误 diff --git a/src/pages/widget/previewer/ImagePreviewer.tsx b/src/pages/widget/previewer/ImagePreviewer.tsx index d24db0a..c28c2f6 100644 --- a/src/pages/widget/previewer/ImagePreviewer.tsx +++ b/src/pages/widget/previewer/ImagePreviewer.tsx @@ -1,19 +1,17 @@ -import "./ImagePreviewer.less" -import PhotoSwipe from 'photoswipe' -import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default' +import './ImagePreviewer.less'; +import PhotoSwipe from 'photoswipe'; +import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'; //PhotoSwipe的样式 -import "photoswipe/dist/photoswipe.css"; -import "photoswipe/dist/default-skin/default-skin.css"; - +import 'photoswipe/dist/photoswipe.css'; +import 'photoswipe/dist/default-skin/default-skin.css'; /** * 图片预览器 * 支持预览一张图片或者多张图片 */ export default class ImagePreviewer { - - private static pswpDom(): HTMLElement { - let innerHTML = ` + private static pswpDom(): HTMLElement { + let innerHTML = `
@@ -76,87 +74,76 @@ export default class ImagePreviewer { - ` + `; - let div: HTMLElement = document.createElement('div'); - div.className = "pswp"; - div.setAttribute("tabIndex", "-1") - div.setAttribute("role", "dialog") - div.setAttribute("aria-hidden", "true") + let div: HTMLElement = document.createElement('div'); + div.className = 'pswp'; + div.setAttribute('tabIndex', '-1'); + div.setAttribute('role', 'dialog'); + div.setAttribute('aria-hidden', 'true'); - div.innerHTML = innerHTML + div.innerHTML = innerHTML; - return div - } + return div; + } - //展示一张图片 - static showSinglePhoto(url: string) { + //展示一张图片 + static showSinglePhoto(url: string) { + ImagePreviewer.showMultiPhoto([url], 0); + } - ImagePreviewer.showMultiPhoto([url], 0) + //展示一系列图片 + static showMultiPhoto(urls: string[], index: number = 0) { + let that = this; + let items: PhotoSwipe.Item[] = []; + urls.forEach((url) => { + items.push({ + src: url, + w: 0, + h: 0, + }); + }); - } + let options = { + closeEl: false, + //不需要历史纪录 + history: false, + //不需要全屏按钮 + fullscreenEl: false, + //不需要分享按钮 + shareEl: false, + //当前从第0张展示。 + index: index, + tapToClose: true, + }; - //展示一系列图片 - static showMultiPhoto(urls: string[], index: number = 0) { + //获取dom节点 + let div = ImagePreviewer.pswpDom(); + //添加到body + document.body.appendChild(div); - let that = this; - let items: PhotoSwipe.Item[] = []; - urls.forEach((url) => { - items.push({ - src: url, - w: 0, - h: 0 - }) - }) - - let options = { - //不需要历史纪录 - history: false, - //不需要全屏按钮 - fullscreenEl: false, - //不需要分享按钮 - shareEl: false, - //点击不要让控制按钮消失 - tapToToggleControls: false, - //当前从第0张展示。 - index: index - }; - - //获取dom节点 - let div = ImagePreviewer.pswpDom() - //添加到body - document.body.appendChild(div); - - let photoSwipe = new PhotoSwipe(div, PhotoSwipeUIDefault, items, options); - - photoSwipe.listen('gettingData', function (index: number, item: PhotoSwipe.Item) { - - if (!item.w || !item.h || item.w < 1 || item.h < 1) { - - //这里为了获取图片真实大小 - const img: HTMLImageElement = new Image() - img.onload = function () { - item.w = img.width - item.h = img.height - photoSwipe.updateSize(true); // reinit Items - } - img.src = item.src! - } - }) - photoSwipe.init(); - - photoSwipe.listen('close', () => { - if (div.parentNode) { - //移除节点 - div.parentNode.removeChild(div); - } - }) - photoSwipe.listen('afterChange', () => { - - }) - - } + let photoSwipe = new PhotoSwipe(div, PhotoSwipeUIDefault, items, options); + photoSwipe.listen('gettingData', function (index: number, item: PhotoSwipe.Item) { + if (!item.w || !item.h || item.w < 1 || item.h < 1) { + //这里为了获取图片真实大小 + const img: HTMLImageElement = new Image(); + img.onload = function () { + item.w = img.width; + item.h = img.height; + photoSwipe.updateSize(true); // reinit Items + }; + img.src = item.src!; + } + }); + photoSwipe.init(); + photoSwipe.listen('close', () => { + if (div.parentNode) { + //移除节点 + div.parentNode.removeChild(div); + } + }); + photoSwipe.listen('afterChange', () => {}); + } } -