emacroh5lib 1.0.31 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.31",
+  "version": "1.0.34",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {

package/src/views/ImageViewer/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
         <div class="duo-viewer-mask">
-            <img ref="duoViewerImage" :src="realSrc" alt="image" class="duo-viewer-mask__image" />
+            <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image" />
         </div>
         <div class="duo-viewer-footer">
             <div class="duo-viewer-footer__title">{{ realName }}</div>
@@ -29,7 +29,7 @@
                     ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
                     : 'duo-viewer-footer__navbar-thumbnail-item'
                 ">
-                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="item" alt="image"
+                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="item" :alt="alt"
                                 class="duo-viewer-footer__navbar-thumbnail-image" />
                         </div>
                     </div>
@@ -43,7 +43,9 @@
 </template>
 
 <script>
-    import "./style/css/index.css";
+
+    // 需优化问题,图片很多时卡顿, 增加页面宽高自适应按钮
+    // 缩放时变形
 
     export default {
         name: "ImageViewer",
@@ -77,11 +79,21 @@
             },
             shrink: {
                 type: Number,
-                default: .4,
+                default: .6,
             },
             enlarge: {
                 type: Number,
                 default: .6,
+            },
+            alt: {
+                type: String,
+                default: "加载失败...",
+            },
+            loadComplete: {
+                type: Function,
+                default: function () {
+                    console.log("loadComplete");
+                }
             }
         },
         computed: {
@@ -133,7 +145,8 @@
                     const imageObject = new Image();
                     promises.push(
                         new Promise((resolve) => {
-                            imageObject.onload = function () {
+                            imageObject.onload = function (event) {
+
                                 $this.listDataCache[i] = {
                                     transform: {
                                         scaleX: "1",
@@ -148,22 +161,41 @@
                                     height: `${imageObject.height}px`,
                                 };
 
-                                resolve("");
+                                resolve(event);
                                 imageObject.onload = null
                             };
+
+                            imageObject.onerror = function (event) {
+                                resolve(event);
+                                imageObject.onerror = null
+                            };
+
                             imageObject.src = item;
                         })
                     );
                 });
 
-                Promise.all(promises).then((data) => {
+                // Promise.all(promises).then((data) => {
+                //     this.image = this.$refs["duoViewerImage"];
+                //     this.initDrag();
+                //     const { width, height } = $this.listDataCache[index];
+                //     $this.setStyleByName($this.image, "width", width);
+                //     $this.setStyleByName($this.image, "height", height);
+                // })
+
+                Promise.race(promises).then((data) => {
                     this.image = this.$refs["duoViewerImage"];
                     this.initDrag();
-                    const { width, height } = $this.listDataCache[index];
+                    this.loadComplete()
+                    try {
+                        const { width, height } = $this.listDataCache[index];
+                        $this.setStyleByName($this.image, "width", width);
+                        $this.setStyleByName($this.image, "height", height);
+                    } catch (error) {
+                        console.log("promises", error);
+                    }
+                })
 
-                    $this.setStyleByName($this.image, "width", width);
-                    $this.setStyleByName($this.image, "height", height);
-                });
             },
             // Reset position
             resetPosition() {
@@ -335,8 +367,8 @@
                 if (h <= 20 && type === "out") return;
 
                 if (type === "out") {
-                    this.setStyleByName(image, "width", `${w * this.shrink}px`);
-                    this.setStyleByName(image, "height", `${h * this.shrink}px`);
+                    this.setStyleByName(image, "width", `${w * (1 - this.shrink)}px`);
+                    this.setStyleByName(image, "height", `${h * (1 - this.shrink)}px`);
                 } else {
                     this.setStyleByName(image, "width", `${w * (1 + this.enlarge)}px`);
                     this.setStyleByName(image, "height", `${h * (1 + this.enlarge)}px`);
@@ -528,5 +560,6 @@
     };
 </script>
 
-<style>
+<style lang="less" scoped>
+    @import "./style/css/index.css";
 </style>

package/src/views/TestView/index.vue

@@ -63,6 +63,7 @@ export default class TestView extends Vue {
 
   public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
   public srcList: Array<String> = [
+    "http://172.16.1.83:18019/EMacroApi/GetFile?type=0&path=C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\%E6%97%A0%E6%A0%87%E9%A2%98.png",
     "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
     "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
     "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
@@ -207,8 +208,7 @@ export default class TestView extends Vue {
   }
 
   public selectFile(e) {
-
-
+ 
     EMacro.File.selectFile().then((files) => {
       EMacro.File.uploadFiles(files, file => {