hookehuyr

fix(图片预览): 修改图片点击事件仅预览单张图片并禁用索引循环

将图片预览功能从显示所有图片改为仅预览当前点击的单张图片,并禁用索引显示和循环功能,提升用户体验
...@@ -123,22 +123,28 @@ const distributeImages = (images) => { ...@@ -123,22 +123,28 @@ const distributeImages = (images) => {
123 }) 123 })
124 } 124 }
125 125
126 -// 图片点击事件 - 使用ImagePreview 126 +/**
127 + * 显示图片预览(仅单张)
128 + * @param {Object} item - 当前点击的图片对象
129 + */
130 +// 图片点击事件 - 仅预览当前单张图片
127 const onImageClick = (item) => { 131 const onImageClick = (item) => {
128 - console.log('点击图片:', item) 132 + console.log('点击图片:', item)
129 133
130 - // 获取当前点击图片在所有图片中的索引 134 + // 获取当前点击图片在所有图片中的索引
131 - const currentIndex = allImages.value.findIndex(img => img.id === item.id) 135 + const currentIndex = allImages.value.findIndex(img => img.id === item.id)
132 136
133 - // 提取所有图片的src用于预览 137 + // 提取所有图片的src用于预览
134 - const images = allImages.value.map(img => img.src) 138 + const images = allImages.value.map(img => img.src)
135 139
136 - // 显示图片预览 140 + // 仅预览当前单张图片,禁用索引与循环
137 - showImagePreview({ 141 + showImagePreview({
138 - images, 142 + images: [images[currentIndex]],
139 - startPosition: currentIndex, 143 + startPosition: 0,
140 - closeable: true 144 + showIndex: false,
141 - }) 145 + loop: false,
146 + closeable: true
147 + })
142 } 148 }
143 149
144 // 图片加载成功 150 // 图片加载成功
......
...@@ -123,22 +123,28 @@ const distributeImages = (images) => { ...@@ -123,22 +123,28 @@ const distributeImages = (images) => {
123 }) 123 })
124 } 124 }
125 125
126 -// 图片点击事件 - 使用ImagePreview 126 +/**
127 + * 显示图片预览(仅单张)
128 + * @param {Object} item - 当前点击的图片对象
129 + */
130 +// 图片点击事件 - 仅预览当前单张图片
127 const onImageClick = (item) => { 131 const onImageClick = (item) => {
128 - console.log('点击图片:', item) 132 + console.log('点击图片:', item)
129 133
130 - // 获取当前点击图片在所有图片中的索引 134 + // 获取当前点击图片在所有图片中的索引
131 - const currentIndex = allImages.value.findIndex(img => img.id === item.id) 135 + const currentIndex = allImages.value.findIndex(img => img.id === item.id)
132 136
133 - // 提取所有图片的src用于预览 137 + // 提取所有图片的src用于预览
134 - const images = allImages.value.map(img => img.src) 138 + const images = allImages.value.map(img => img.src)
135 139
136 - // 显示图片预览 140 + // 仅预览当前单张图片,禁用索引与循环
137 - showImagePreview({ 141 + showImagePreview({
138 - images, 142 + images: [images[currentIndex]],
139 - startPosition: currentIndex, 143 + startPosition: 0,
140 - closeable: true 144 + showIndex: false,
141 - }) 145 + loop: false,
146 + closeable: true
147 + })
142 } 148 }
143 149
144 // 图片加载成功 150 // 图片加载成功
......