From be8dae345c9ce27576231646944cf911f61b4952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9A=AE=E5=85=89=EF=BC=9A=E5=9F=8E=E4=B8=AD=E5=9F=8E?=
 <806783409@qq.com>
Date: Sat, 1 Apr 2023 17:49:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wiki-ui/src/views/page/Show.vue           | 28 ++------
 .../wiki-ui/src/views/page/share/pc/View.vue  | 67 ++++++++-----------
 2 files changed, 35 insertions(+), 60 deletions(-)

diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
index 8b8c615f..4d2f58f7 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
@@ -172,14 +172,13 @@
 				<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
 			</div>
 		</el-dialog>
-		<div ref="imagePreviewRef">
-			<el-image-viewer
-					v-if="showImagePreview"
-					:url-list="showImagePreviewList"
-					:on-close="closeImagePreview"
-					:initial-index="previewInitialIndex"
-			/>
-		</div>
+		<el-image-viewer
+				v-if="showImagePreview"
+				:url-list="showImagePreviewList"
+				:initial-index="previewInitialIndex"
+				@close="closeImagePreview"
+				hide-on-click-modal
+		/>
 		<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
 			<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
 		</form>
@@ -602,19 +601,6 @@ const previewPageImage = () => {
 			previewInitialIndex.value = index
 			showImagePreviewList.value = imgArr
 			showImagePreview.value = true
-			setTimeout(() => initImageViewerMask(), 0)
-		}
-	})
-}
-let imagePreviewRef = ref();
-const initImageViewerMask = () => {
-	// 图片预览遮罩点击隐藏预览框
-	let imageViewerMask = imagePreviewRef.value.querySelectorAll(
-		'.el-image-viewer__mask'
-	)
-	imageViewerMask.forEach((item) => {
-		item.onclick = () => {
-			showImagePreview.value = false
 		}
 	})
 }
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue b/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
index 9de18686..ba13e8db 100644
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
@@ -32,13 +32,13 @@
 				<Navigation :heading="navigationList"></Navigation>
 			</el-col>
 		</el-row>
-		<div ref="imagePreviewRef">
-			<el-image-viewer v-if="showImagePreview"
-			                 :url-list="showImagePreviewList"
-			                 :on-close="closeImagePreview"
-			                 :initial-index="previewInitialIndex">
-			</el-image-viewer>
-		</div>
+		<el-image-viewer
+				v-if="showImagePreview"
+				:url-list="showImagePreviewList"
+				:initial-index="previewInitialIndex"
+				@close="closeImagePreview"
+				hide-on-click-modal
+		/>
 	</div>
 </template>
 
@@ -105,61 +105,50 @@ const loadPageDetail = (pageId) => {
 	})
 }
 const initQueryParam = (to) => {
-	spaceUuid.value = to.query.space
-	nowPageId.value = to.query.pageId
+	spaceUuid.value = to.query.space;
+	nowPageId.value = to.query.pageId;
 	if (!!nowPageId.value) {
-		loadPageDetail(nowPageId.value)
+		loadPageDetail(nowPageId.value);
 	}
 }
 const computeFileSize = (fileSize) => {
 	if (!fileSize) {
-		return '-'
+		return '-';
 	}
-	let size = ''
+	let size = '';
 	if (fileSize < 0.1 * 1024) {
-		size = fileSize.toFixed(2) + 'B'
+		size = fileSize.toFixed(2) + 'B';
 	} else if (fileSize < 0.1 * 1024 * 1024) {
-		size = (fileSize / 1024).toFixed(2) + 'KB'
+		size = (fileSize / 1024).toFixed(2) + 'KB';
 	} else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
-		size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB'
+		size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
 	} else {
-		size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
+		size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
 	}
-	let sizeStr = size + ''
-	let index = sizeStr.indexOf('.')
-	let dou = sizeStr.substr(index + 1, 2)
+	let sizeStr = size + '';
+	let index = sizeStr.indexOf('.');
+	let dou = sizeStr.substr(index + 1, 2);
 	if (dou == '00') {
-		return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
+		return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
 	}
-	return size
+	return size;
 }
 const closeImagePreview = () => {
-	showImagePreview.value = false
+	showImagePreview.value = false;
 }
 let pageContentRef = ref();
 const previewPageImage = () => {
-	const imgArr = []
-	const imgSelector = pageContentRef.value.querySelectorAll('img')
+	const imgArr = [];
+	const imgSelector = pageContentRef.value.querySelectorAll('img');
 	imgSelector.forEach((item, index) => {
-		imgArr.push(item.src)
+		imgArr.push(item.src);
 		item.onclick = () => {
-			previewInitialIndex.value = index
-			showImagePreviewList.value = imgArr
-			showImagePreview.value = true
-			setTimeout(() => initImageViewerMask.value(), 0)
+			previewInitialIndex.value = index;
+			showImagePreviewList.value = imgArr;
+			showImagePreview.value = true;
 		}
 	})
 }
-let imagePreviewRef = ref();
-const initImageViewerMask = () => {
-	// 图片预览遮罩点击隐藏预览框
-	let imageViewerMask = imagePreviewRef.value.querySelectorAll(
-		'.el-image-viewer__mask'
-	)
-	imageViewerMask.forEach((item) => {
-		item.onclick = () => (showImagePreview.value = false)
-	})
-}
 </script>
 
 <style>