稳定性: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
常见错误
必须用与 mount 相同的 HTMLElement 调用 unmount。先由业务代码检查查询结果,避免依赖当前字符串选择器路径;iframe 若不实现消息协议,Promise 可能长期 pending。
