emacroh5lib 1.0.40 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/emacroh5lib.min.js +1 -1
  2. package/package.json +1 -1
  3. package/src/views/ImageViewer/index.vue +40 -13
  4. package/src/views/TestView/index.vue +14 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "emacroh5lib",
3
- "version": "1.0.40",
3
+ "version": "1.0.43",
4
4
  "description": "EMacro前端组件库",
5
5
  "main": "dist/emacroh5lib.min.js",
6
6
  "scripts": {
package/src/views/ImageViewer/index.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
3
3
  <div class="duo-viewer-mask">
4
- <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image"/>
4
+ <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image" />
5
5
  </div>
6
6
  <div class="duo-viewer-footer">
7
7
  <div class="duo-viewer-footer__title">{{ realName }}</div>
@@ -178,7 +178,7 @@
178
178
 
179
179
  $this.image = $this.$refs["duoViewerImage"];
180
180
  $this.initDrag();
181
- this.$emit("loadComplete");
181
+ $this.$emit("loadComplete");
182
182
  const { width, height } = $this.listDataCache[index];
183
183
  $this.setStyleByName($this.image, "width", width);
184
184
  $this.setStyleByName($this.image, "height", height);
@@ -191,13 +191,17 @@
191
191
  const { width, height } = $this.listDataCache[index];
192
192
  $this.setStyleByName($this.image, "width", width);
193
193
  $this.setStyleByName($this.image, "height", height);
194
+
195
+ setTimeout(() => {
196
+ $this.resetZoom();
197
+ }, 100);
194
198
  })
195
199
 
196
200
  },
197
201
  // Reset position
198
202
  resetPosition() {
199
- let image = this.image,
200
- oldTransform = this.getCurrentTransform(image);
203
+ let image = this.image;
204
+ let oldTransform = this.getCurrentTransform(image);
201
205
 
202
206
  this.setStyleByName(image, "top", "50%");
203
207
  this.setStyleByName(image, "left", "50%");
@@ -219,13 +223,26 @@
219
223
  },
220
224
 
221
225
  // Reset zoom action
222
- resetZoom() {
226
+ resetZoom(adaptive = true) {
223
227
  let image = this.image;
224
228
  const imageObject = new Image();
225
229
 
226
230
  imageObject.src = this.list[this.index];
227
231
 
228
- const { width, height } = imageObject;
232
+ let { width, height } = imageObject;
233
+
234
+ if (adaptive) {
235
+ let rate = 1
236
+ if (width > height) {
237
+ rate = width / document.body.clientWidth
238
+ }
239
+ else {
240
+ rate = height / document.body.clientHeight
241
+ }
242
+
243
+ width = width / rate
244
+ height = height / rate
245
+ }
229
246
 
230
247
  this.setStyleByName(image, "width", `${width}px`);
231
248
  this.setStyleByName(image, "height", `${height}px`);
@@ -268,7 +285,11 @@
268
285
 
269
286
  // Set style by name
270
287
  setStyleByName(obj, key, value) {
271
- obj && (obj.style[key] = value);
288
+ try {
289
+ obj && (obj.style[key] = value);
290
+ } catch (error) {
291
+ console.log("setStyleByName", error, obj, key, value);
292
+ }
272
293
  },
273
294
 
274
295
  // Get element current transform
@@ -310,11 +331,17 @@
310
331
  }
311
332
  this.judgeThumbnailListMove(lastIndex, this.index);
312
333
 
313
- this.setStyleByName(this.image, "width", this.currentData.width);
314
- this.setStyleByName(this.image, "height", this.currentData.height);
315
- this.setStyleByName(this.image, "left", this.currentData.left);
316
- this.setStyleByName(this.image, "top", this.currentData.top);
317
- this.setTransform(this.image, this.currentData.transform);
334
+ setTimeout(() => {
335
+
336
+ this.setStyleByName(this.image, "width", this.currentData.width);
337
+ this.setStyleByName(this.image, "height", this.currentData.height);
338
+ this.setStyleByName(this.image, "left", this.currentData.left);
339
+ this.setStyleByName(this.image, "top", this.currentData.top);
340
+ this.setTransform(this.image, this.currentData.transform);
341
+
342
+ this.resetZoom();
343
+ this.resetPosition();
344
+ }, 100);
318
345
  },
319
346
  // To judge thumbnail list move
320
347
  judgeThumbnailListMove(lastIndex, index) {
@@ -524,7 +551,7 @@
524
551
  this.zoom("out");
525
552
  break;
526
553
  case "one-to-one":
527
- this.resetZoom();
554
+ this.resetZoom(false);
528
555
  break;
529
556
  case "prev":
530
557
  this.switchAction("prev");
package/src/views/TestView/index.vue CHANGED
@@ -68,16 +68,18 @@ export default class TestView extends Vue {
68
68
 
69
69
  public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
70
70
  public srcList: Array<String> = [
71
- // "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",
72
- // "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
73
- // "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
74
- // "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
75
- // "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
76
- // "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
77
- // "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
78
- "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4",
79
- "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\ker.mp4",
80
- "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\video2.mp4",
71
+ "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
72
+ "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\060 广西电子商务公共服务平台大数据中心.png",
73
+ "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
74
+ "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
75
+ "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
76
+ "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
77
+ "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
78
+ "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
79
+ // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4",
80
+ // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\ker.mp4",
81
+ // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\video2.mp4",
82
+ // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
81
83
  ] // 图片查看器数据集
82
84
 
83
85
  public src: String = "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4"
@@ -89,8 +91,8 @@ export default class TestView extends Vue {
89
91
  public listHeight = 0;
90
92
 
91
93
  public handleOpen() {
92
- // this.showViewer = true;
93
- this.showVideoViewer = true;
94
+ this.showViewer = true;
95
+ // this.showVideoViewer = true;
94
96
  }
95
97
  public openCallback() { } // 打开时的回调
96
98
  public closeCallback() { } // 关闭时的回调