vue3 v-viewer插件引入

【项目开发 个人笔记记录】

图片预览 v-viewer插件

1.安装依赖

pnpm install viewerjs  
pnpm install v-viewer

2.mian.ts中引入

/** 图片预览插件 **/
// #region 图片预览插件 start

import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";

//#endregion 图片预览插件 end

可写些默认配置

//指定默认配置
  app.use(Viewer, {
    Options: {
      inline: true,
      button: true, //右上角按钮
      navbar: true, //底部缩略图
      title: true, //当前图片标题
      toolbar: true, //底部工具栏
      tooltip: true, //显示缩放百分比
      movable: true, //是否可以移动
      zoomable: true, //是否可以缩放
      rotatable: true, //是否可旋转
      scalable: true, //是否可翻转
      transition: true, //使用 CSS3 过度
      fullscreen: true, //播放时是否全屏
      keyboard: true, //是否支持键盘
      url: "data-source",
    },
  });

3.项目具体页面使用
这边使用的是api的格式 个人觉得相对便捷

import { api as viewerApi } from "v-viewer";

这边是如此操作是因为这边 数据源有嵌套数组 所以进行了数据操作
影响不大 最终需要的格式是urlList