fix some preview bug

CHANGELOG.md

@@ -1,3 +1,4 @@
 # 3.1.6
 1. 优化拖拽文件夹进行上传的错误提示
 2. 优化超出限制大小的错误提示
+3. 修复图片预览的已知错误

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 = `
     <!-- Background of PhotoSwipe.
          It's a separate element as animating opacity is faster than rgba(). -->
     <div class="pswp__bg"></div>
@@ -76,87 +74,76 @@ export default class ImagePreviewer {
 
     </div>
 
-    `
+    `;
 
-    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', () => {});
+    }
 }
-