在Ant Design Vue 中使用图片预览的插件

在package.json中 安装  viewerjs 

样式部门代码

<!-- 图片显示区域 - 使用Viewer.js --><template slot="images" slot-scope="text, record"><div class="image-container"><div class="image_list" :id="'image-group-' + record.id"><div v-for="(img, index) in text" :key="index" class="imageInfo"><img :src="fixImageUrl(img)" class="image_item" /></div></div><div v-if="!text || text.length === 0" class="no-image">无图片</div></div></template>

Js部分代码

 data() {return {viewerInstances: {}, // 存储Viewer实例// 表格列配置columns: [{title: "图片",dataIndex: "images",scopedSlots: { customRender: "images" },width: 400,},]}
}

methods 方法部分

 methods: {/*** 初始化Viewer.js实例*/initViewers() {// 销毁现有的Viewer实例this.destroyAllViewers();// 为每个图片组创建Viewer实例this.orderData.forEach((item) => {if (item.images && item.images.length > 0) {const container = document.getElementById(`image-group-${item.id}`);if (container) {this.viewerInstances[item.id] = new Viewer(container, {toolbar: {zoomIn: 1, // 放大zoomOut: 1, // 缩小oneToOne: 1, // 1:1比例prev: 1, // 上一张next: 1, // 下一张},movable: true, // 允许拖拽图片zoomable: true, // 允许缩放rotatable: true, // 允许旋转scalable: true, // 允许拉伸transition: true, // 切换图片时使用过渡动画fullscreen: true, // 支持全屏keyboard: true, // 支持键盘操作（如箭头键切换图片）});}}});},/*** 销毁所有Viewer实例*/destroyAllViewers() {Object.keys(this.viewerInstances).forEach((key) => {if (this.viewerInstances[key]) {this.viewerInstances[key].destroy();}});this.viewerInstances = {};},
}

最终效果