From fa2ae1a80d16b063dafe2c5f52fb905b6cf9e00f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E8=8B=B1=E6=9D=B0?= <327782001@qq.com>
Date: Wed, 9 Aug 2023 21:24:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=BF=BB=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menus/MyPic.vue | 53 ++++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/menus/MyPic.vue b/src/components/menus/MyPic.vue
index 873d6c6..250a4e9 100644
--- a/src/components/menus/MyPic.vue
+++ b/src/components/menus/MyPic.vue
@@ -10,7 +10,7 @@
 					<el-table-column prop="picName" label="图片名字" width="240" show-overflow-tooltip></el-table-column>
 					<el-table-column align="center">
 						<template slot-scope="props">
-							<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl)" style="cursor: pointer" />
+							<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" />
 						</template>
 					</el-table-column>
 					<el-table-column label="创建时间" width="170">
@@ -20,8 +20,17 @@
 					</el-table-column>
 				</el-table>
 				<el-dialog :visible.sync="imageDialogVisible" width="30%">
-					<img :src="enlargedImageUrl" alt="放大图片" style="width: 100%" />
+					<div style="display: flex; align-items: center; justify-content: space-between">
+						<button class="arrow-button" :class="{ disabled: imageIndex === 0 }" @click="showBeforeImage" :disabled="imageIndex === 0">
+							<el-icon class="custom-icon" name="arrow-left"></el-icon>
+						</button>
+						<img :src="enlargedImageUrl" alt="放大图片" style="width: 80%" />
+						<button class="arrow-button" :class="{ disabled: imageIndex === picList.length - 1 }" @click="showNextImage" :disabled="imageIndex === picList.length - 1">
+							<el-icon class="custom-icon" name="arrow-right"></el-icon>
+						</button>
+					</div>
 				</el-dialog>
+
 				<el-pagination class="pagination" background :key="elementui_page_component_key" :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
 			</el-main>
 		</el-container>
@@ -43,6 +52,7 @@ export default {
 			total: 0,
 			imageDialogVisible: false,
 			enlargedImageUrl: '',
+			imageIndex: 0, // 当前展示的图片索引
 			options: [
 				{
 					value: 0,
@@ -73,9 +83,26 @@ export default {
 		this.queryPic()
 	},
 	methods: {
-		showImageDialog(url) {
+		showBeforeImage() {
+			if (this.imageIndex > 0) {
+				// 增加索引以显示下一张图片
+				this.imageIndex--
+				this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
+				this.imageDialogVisible = true // 打开对话框展示图片
+			}
+		},
+		showNextImage() {
+			if (this.imageIndex < this.picList.length - 1) {
+				// 增加索引以显示下一张图片
+				this.imageIndex++
+				this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
+				this.imageDialogVisible = true
+			}
+		},
+		showImageDialog(url, index) {
 			this.enlargedImageUrl = url
 			this.imageDialogVisible = true
+			this.imageIndex = index
 		},
 		async queryPic() {
 			this.loading = true
@@ -115,4 +142,24 @@ export default {
 	margin-top: 16px;
 	text-align: right;
 }
+
+.arrow-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.custom-icon {
+	font-size: 24px; /* 调整图标大小 */
+	color: #ff9900; /* 调整图标颜色 */
+	margin-right: 6px; /* 调整图标与文字之间的间距 */
+}
+
+.arrow-button.disabled {
+	pointer-events: none; /* 禁用点击事件 */
+	opacity: 0.1; /* 添加透明度来表示禁用状态 */
+}
 </style>
\ No newline at end of file
-- 
GitLab