1.我這裡是在子頁面的圖片，需要在父頁面啟動圖片放大器。
首先父頁面加入所需的viewer.js和view.css
這裡是子頁面的前端部分

<div v-for="(attachImg,index) in attachList" style="width: 100%;" :key="attachImg.id" > 
			<img @click="openImg(attachImg.filePath,attachList)"  v-bind:src="attachImg.filePath" v-bind:layer-src="attachImg.filePath"   style="width: 100%; height: auto;"/>
		<div style="height: 50px;width: 100%;">
				<div style="height: 25px;width: 100%;border-bottom: solid 2px #0490A6;"></div>
			</div>
		</div>

這裡是子頁面的js部分

// 檢視大圖1
		openImg: function(obj, objs) {
			window.parent.vm.zoomImages(obj, objs);
			
		},

2.父頁面
父頁面加上這個。這個就是後面的放大器的容器了

<ul id="img_zooms" style="display: none;"></ul>

父頁面的js

zoomImages: function(url, attaches) {
			debugger
			$("#img_zooms").empty();
			$(attaches).each(function(i) {
				var attache;
				if (attaches[i] != undefined) {
					if (attaches[i].filePath != null) {
						attache = $.trim(attaches[i].filePath);
					} else {
						attache = $.trim(attaches[i].filePath);
					}
				} else {
					attache = '';
				}
		
				var urlImg = url.replace(/\//g, '');
				var attachImg = attache.replace(/\//g, '');
		
				if (urlImg == attachImg) {
					$("#img_zooms").append("<li><img id='img_click' src='" + attache + "'></li>");
				} else {
					$("#img_zooms").append("<li><img src='" + attache + "'></li>");
				}
			});
			var options = {
				url: 'src',
				fullscreen: true, //播放時是否全屏
				zIndex: 99999999999, //設定圖片檢視器 modal 模式時的 z-index
				title: function(image) {
					return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
				}
			};
			if (vm.viewers != undefined) {
				vm.viewers.destroy();
			}
			vm.viewers = new Viewer(document.getElementById('img_zooms'), options);
		
			if ($("#img_click")) {
				$("#img_click").click();
			}
		},