ElImageViewer 是 element-plus 没有在文档中列出的一个组件。

1、新建 imgViewer.tsx

import { ref, createApp } from "vue";
import { ElImageViewer } from "element-plus";

class ImgView {
  container: any = null;
  app: any = null;
  comp: any = null;
  urlList = [];
  show = ref(false);
  constructor() {
    this.init();
  }

  init() {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const _this = this;
    this.container = document.createElement("div");
    document.body.appendChild(this.container);
    const ImgViewC = {
      setup() {
        return {};
      },
      render() {
        return (
          _this.show.value && (
            <ElImageViewer
              urlList={_this.urlList}
              onClose={() => _this.close()}
            />
          )
        );
      },
    };
    this.comp = ImgViewC;
    this._mount();
  }
  _mount() {
    setTimeout(() => {
      const app = createApp(this.comp);
      this.app = app;
      app.mount(this.container);
    }, 500);
  }
  viewlist(urlList = []) {
    this.urlList = urlList;
    this.show.value = true;
  }
  close() {
    this.show.value = false;
    this.urlList = [];
  }
}

const imgViewer = new ImgView();
window._imgViewer = imgViewer;

export default imgViewer;

2、在 main.ts 中引入

import './common/imgViewer'

3、使用

// 因为我将实例化后的对象挂在了 window 上，也可以根据自己的方式引入去使用
// 调用 viewlist 方法传入 url 列表
window._imgViewer.viewlist([url]);