渲染与输出

稳定

mount 与 unmount

稳定性:stable。生命周期方法的规范拼写是 mount / unmount。

调用方式与方法签名

mount(options: MountOptions, container: HTMLElement | string, Vue?): Promise<unknown>
unmount(container: HTMLElement | string): void

MountOptions 包含同级的 reportOptions、printOptions?、iframe?、iframeStyle? 和 extraStyle?。

参数与默认值

  • iframe 默认 false。
  • iframeStyle 默认 {},覆盖 iframe 元素默认的 width: 100%、height: 100%、border: none。
  • extraStyle 默认空字符串,iframe 加载后注入子文档。
  • 类型声明允许 HTMLElement | string,但当前实现应传入实际 HTMLElement,并用同一元素执行 unmount。iframe 分支会直接调用原参数的 append,实例又记录在 WeakMap 中,因此字符串选择器无法可靠完成整个生命周期。

返回值与异常

传入有效 HTMLElement 时,mount 返回 Promise:非 iframe resolve Vue Builder 实例,iframe resolve 消息代理。内部校验识别到无效挂载点时返回 { code: 601 },Vue 缺失返回 { code: 602 };但缺失的字符串选择器可能在 601 校验前抛出 TypeError。unmount 没有返回值;找不到已记录实例时仅记录错误。

最小示例

const container = document.querySelector("#report-host");
if (!container) throw new Error("Missing #report-host");
const instance = await api.mount(
  {
    reportOptions: {
      reportCode: "sales-summary",
      reportVersion: "1.0.0",
    },
  },
  container,
  Vue,
);

// 使用 instance 后,在页面销毁阶段执行:
api.unmount(container);

iframe 模式差异

iframe 默认 src 为同源的 index.html?...,可通过 reportOptions.url 改为其他同源路径,例如 /bee-report/index.html。挂载时源码直接访问 contentWindow.document 并写 contentWindow.$$BEEREPORT_PARAMS,所以跨域入口需要先改造成纯 postMessage 协议。unmount 对 iframe 发送 { type: "unmount" };子页回传 unmount 后当前实现移除 iframe。

相关 API

reportOptions、运行时实例方法。

常见错误

必须用与 mount 相同的 HTMLElement 调用 unmount。先由业务代码检查查询结果,避免依赖当前字符串选择器路径;iframe 若不实现消息协议,Promise 可能长期 pending。