fix(图片预览): 修改图片点击事件仅预览单张图片并禁用索引循环
将图片预览功能从显示所有图片改为仅预览当前点击的单张图片,并禁用索引显示和循环功能,提升用户体验
Showing
2 changed files
with
36 additions
and
24 deletions
| ... | @@ -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 | // 图片加载成功 | ... | ... |
-
Please register or login to post a comment