fix(图片预览): 修改图片点击事件仅预览单张图片并禁用索引循环
将图片预览功能从显示所有图片改为仅预览当前点击的单张图片,并禁用索引显示和循环功能,提升用户体验
Showing
2 changed files
with
20 additions
and
8 deletions
| ... | @@ -123,7 +123,11 @@ const distributeImages = (images) => { | ... | @@ -123,7 +123,11 @@ 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 | ||
| ... | @@ -133,10 +137,12 @@ const onImageClick = (item) => { | ... | @@ -133,10 +137,12 @@ const onImageClick = (item) => { |
| 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, |
| 144 | + showIndex: false, | ||
| 145 | + loop: false, | ||
| 140 | closeable: true | 146 | closeable: true |
| 141 | }) | 147 | }) |
| 142 | } | 148 | } | ... | ... |
| ... | @@ -123,7 +123,11 @@ const distributeImages = (images) => { | ... | @@ -123,7 +123,11 @@ 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 | ||
| ... | @@ -133,10 +137,12 @@ const onImageClick = (item) => { | ... | @@ -133,10 +137,12 @@ const onImageClick = (item) => { |
| 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, |
| 144 | + showIndex: false, | ||
| 145 | + loop: false, | ||
| 140 | closeable: true | 146 | closeable: true |
| 141 | }) | 147 | }) |
| 142 | } | 148 | } | ... | ... |
-
Please register or login to post a comment