vue3使用el-image-viewer 图片被el-dialog覆盖

### 使用 `el-image-viewer` 组件同时展示多张图片 为了实现在 Vue 项目中通过 `el-image-viewer` 展示多张图片的效果，可以创建一个自定义方法来处理点击事件并传递一组图片链接给查看器组件。下面是一个详细的解决方案： #### HTML 结构 在模板部分定义用于触发预览操作的按钮以及隐藏的图像列表。 ```html <template> <!-- 图片容器 --> <div class="image-container"> <img v-for="(item, index) in images" :key="index" @click="handlePreview(index)" :src="item.src"/> </div> <!-- 隐藏的 image viewer 实例 --> <el-image-viewer ref="viewerRef" :initial-index.sync="currentIndex" :url-list="images.map(img => img.src)" hide-on-click-modal /> </template> ``` #### JavaScript 方法 编写相应的逻辑以控制何时打开查看器，并指定要显示的第一张图片索引位置。 ```javascript <script setup lang="ts"> import { reactive } from 'vue'; // 假设这是你的图片数据源 const images = reactive([ { src: '/path/to/image1.jpg' }, { src: '/path/to/image2.png' } ]); let currentIndex = -1; function handlePreview(index:number){ currentIndex = index; const viewerInstance = this.$refs.viewerRef; setTimeout(() => { viewerInstance.show(); },0); } </script> ``` 此方案解决了当页面中有多个 `el-image` 或其他类型的 `<img>` 标签时可能出现的选择错误的问题[^1]。此外，在对话框关闭前检查是否有正在显示的大图预览窗口也很重要，这可以通过监听 dialog 的 before-close 事件完成[^2]。 对于希望向每一张大图旁边添加额外功能（比如下载按钮）的需求，则可以在初始化配置项里加入 customClass 来挂载特定样式或者直接修改 element-plus 源码实现更复杂的功能需求[^3]。

### 替代 Element UI `el-image` 组件的 Viewer 库 对于希望替换 Element UI 中 `el-image` 组件及其查看器功能的需求，存在多种优秀的开源库可以选择。以下是几个推荐的选择： #### 1. LightGallery.js LightGallery 是一款轻量级且高度可定制化的图片查看插件。 - **特点** - 支持缩放和平移操作。 - 提供简洁直观的操作界面。 - 可轻松集成到 Vue 项目中[^1]。 ```javascript import lightGallery from 'lightgallery-js'; // 初始化 gallery 实例 new lightGallery(document.getElementById('light-gallery'), { selector: '.image-item', }); ``` #### 2. PhotoSwipe PhotoSwipe 是另一个流行的 JavaScript 图片查看库，具有良好的性能表现和丰富的配置选项。 - **特性** - 高效处理大量图像加载。 - 完全响应式设计适应不同设备。 - 开源社区活跃维护更新频繁[^2]。 ```html <!-- HTML 结构 --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Photoswipe 的默认皮肤会自动应用样式 --> </div> <script src="./path/to/photoswipe.min.js"></script> <script src="./path/to/photoswipe-ui-default.min.js"></script> <script type="text/javascript"> var pswpElement = document.querySelectorAll('.pswp')[0]; // 构建 items 数组... var items = [ {src:'https://example.com/image1.jpg', w:800, h:600}, // 更多项... ]; // 创建并初始化光箱实例 let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items); gallery.init(); </script> ``` #### 3. vue-awesome-swiper 基于 Swiper 的 Vue 封装版本，不仅支持基本轮播效果还提供了强大的交互能力用于实现图片预览等功能。 - **优势** - 基于广泛使用的 Swiper 插件开发而成。 - 对移动端友好优化良好用户体验。 - 文档详尽易于上手学习成本低[^3]。 ```vue <template> <swiper :options="swiperOption"> <swiper-slide v-for="(slide,index) in slides" :key="index"> <img :src="slide.src"/> </swiper-slide> <!-- 分页器和其他导航控件... --> </swiper> </template> <script> export default{ data(){ return { swiperOption:{ zoom:true, pagination:{ el:'.swiper-pagination'}, navigation:{ nextEl:'.swiper-button-next', prevEl:'.swiper-button-prev'} }, slides:[ {'src':'http://placekitten.com/960/720'}, // 添加更多幻灯片对象... ] } } } </script> ``` 这些替代方案都能很好地满足在 Web 应用程序中展示高质量图片以及提供流畅浏览体验的要求。每种工具都有其独特之处，在实际选用时可以根据具体需求和个人偏好做出最佳决策。