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

开发者小天2025-09-05 12:10

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

最终效果