在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 = {};
    },
}

最终效果

相关推荐
Zuckjet_39 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801461 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy2 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿4 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法5 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴5 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js