在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 = {};
},
}
最终效果
