ComPDF
联系销售
DemoAPI 参考文档FAQ
、

PDF 生成模板编辑器

开源可视化 PDF 生成引擎，支持自定义模板，并提供面向开发者的 API，灵活构建文档生成流程。

查看 GitHub

自定义弹窗 ​

你可以注册自定义模态对话框，并用标准元素 API（openElement、closeElement、disableElements）控制它们。弹窗通过 CustomModal 组件和 ModalContainer 宿主渲染。

UI API ​

UI.addCustomModal(options) ​

注册自定义模态对话框。

javascript
/**
 * @method UI.addCustomModal
 * @param {object} options
 * @param {string} options.dataElement               自定义弹窗的唯一名称。
 * @param {boolean} [options.disableBackdropClick=false] 禁止点击外部关闭。
 * @param {boolean} [options.disableEscapeKeyDown=false] 禁止按 Escape 关闭。
 * @param {UI.renderCustomModal} options.render      渲染弹窗内容的函数（可选）。
 * @param {object} options.header                    { title, className, style, children }
 * @param {object} options.body                      { title, className, style, children }
 * @param {object} options.footer                    { title, className, style, children }
 */
UI.addCustomModal({
  dataElement: 'myModal',
  disableBackdropClick: false,
  disableEscapeKeyDown: false,
  header: { title: 'My Modal' },
  body:   { children: [/* … */] },
  footer: { children: [/* … */] },
});

以已存在的 dataElement 注册弹窗会替换它。内部调用 store.addCustomModal(customModal)，追加到 viewer store 的 customModals 列表。

控制弹窗 ​

注册后，使用其 dataElement 像其他元素一样控制：

javascript
UI.openElement('myModal');      // 显示
UI.closeElement('myModal');     // 隐藏
UI.disableElements(['myModal']); // 完全移除
UI.isElementOpen('myModal');    // => boolean

结构 ​

弹窗分为三个可选区域——header、body、footer——每个接受 { title, className, style, children }。也可提供返回 HTMLElement 的 render 函数（UI.renderCustomModal）实现完全自定义内容。

区域字段用途
title区域标题文本。
className应用于区域的自定义类名。
style行内样式对象。
children子描述符/元素数组。

示例 ​

确认弹窗 ​

javascript
UI.addCustomModal({
  dataElement: 'confirmModal',
  disableBackdropClick: true,
  header: { title: 'Please confirm' },
  body:   { title: 'Are you sure you want to continue?' },
  footer: {
    children: [
      { type: 'actionButton', label: 'Cancel', onClick: () => UI.closeElement('confirmModal') },
      { type: 'actionButton', label: 'OK',     onClick: () => { /* … */ UI.closeElement('confirmModal'); } },
    ],
  },
});

UI.openElement('confirmModal');

使用自定义 render 函数的弹窗 ​

javascript
UI.addCustomModal({
  dataElement: 'customRenderModal',
  render: () => {
    const el = document.createElement('div');
    el.innerHTML = '<h3>Custom</h3><p>Rendered by a function.</p>';
    return el;
  },
});
UI.openElement('customRenderModal');

内部机制 ​

  • viewer store 持有 customModals[] 列表；addCustomModal 按 dataElement 追加/替换。
  • CustomModal 组件（通过 LazyLoadComponents 懒加载）渲染每个已注册弹窗。
  • ModalContainer 托管弹窗栈，处理背景点击/Escape 关闭（受 disableBackdropClick / disableEscapeKeyDown 标志控制）。
  • 可见性由与内置对话框相同的 activeElements / disabledElements 映射驱动。

相关 ​