fix:新增图片翻页

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