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

最终效果

相关推荐
华科云商xiao徐4 小时前
手把手教你用Go打造带可视化的网络爬虫
前端·爬虫
_月下闲人4 小时前
已掌握 Vue2 的开发者,快速上手 Vue3
前端·javascript·vue.js
光头程序员4 小时前
vite_react 插件 find_code 最终版本
前端·javascript·react.js
陈随易4 小时前
改变世界的编程语言MoonBit:项目文件详解
前端·后端·程序员
叶常落4 小时前
【frontend】事件监听,事件捕获阶段(capture phaze),目标阶段,事件冒泡阶段
javascript
拜无忧4 小时前
three.js纸飞机飞行撞建筑
前端·three.js
无光末阳4 小时前
前端 vue3+router 比较好用的自定义日志插件
前端·vue.js
liercats4 小时前
ECharts图表正常但动画不显示?问题排查指南:大概率是宽高问题
前端
四季豆豆豆4 小时前
办公任务分发项目 laravel vue mysql 第一章:核心功能构建 API
vue.js·mysql·laravel