显示/隐藏元素
UI 中几乎每个可见部分都是一个由 data-element 字符串标识的元素。本指南介绍打开/关闭、启用/禁用以及在元素标签页之间切换的 API。
所有标识符集中定义在 packages/webview/src/constants/dataElements.js。viewer store 通过三个映射跟踪它们:
activeElements{}— 元素当前是否打开。disabledElements{}— 元素是否从 DOM 卸载({ disabled, style })。activeElementsTab{}— 带标签元素内的活动子标签。
UI API
打开/关闭
UI.openElement(dataElement) // 打开一个元素
UI.closeElement(dataElement) // 关闭一个元素
UI.openElements(dataElements) // 打开多个:string[]
UI.closeElements(dataElements) // 关闭多个:string[]
UI.isElementOpen(dataElement) // => boolean打开元素会设置 activeElements[dataElement] = true。打开一个面板会关闭同侧(左/右)的兄弟面板,因此同一侧一次只打开一个面板。打开左面板会调用 core.toggleSidebar();打开搜索面板还会打开左面板并将其标签切换到搜索标签。
启用/禁用
/**
* @method UI.disableElements
* @param {string[] | string} dataElements 一个 data-element 或数组。
*/
UI.disableElements(['printButton', 'downloadButton']);
/**
* @method UI.enableElements
* @param {string[] | string} dataElements 一个 data-element 或数组。
*/
UI.enableElements(['printButton']);disableElements 会将元素从 DOM 卸载。重要:这仅移除 DOM 节点——不会禁用底层功能。例如,禁用 printButton 会移除按钮,但打印仍可能通过编程方式或键盘触发。要真正禁用某功能,请使用功能专属 API(如引擎的权限 API)。
单个字符串会被当作一个元素分派;数组会作为多个分派。其他类型会记录错误。
活动标签
UI.setActiveElementTab(dataElement, tab);设置带标签元素(如 leftPanel、rightPanel)内的活动标签。如果元素不是带标签元素,会记录 "DataElement not found." 警告。标签标识符也定义在 dataElements.js(如左面板的 ThumbnailsButton、OutlinesButton、AnnotationButton、LayersButton、SignatureButton、SearchButton;右面板的 General、Appearance、Preference)。
常用 data-element
面板
leftPanel、rightPanel、stylePanel、pageModePanel、stampPanel、linkPanel、contentEditorPanel、colorSeparationPanel、redactionPanel、searchPanel、measurePanel、freetextPanel。
工具栏/头部按钮
openFileButton、searchButton、pageModeButton、downloadButton、flattenButton、printButton、theme、settingButton、fullScreenButton、handToolButton、zoomOverlayButton、cropPageButton。
属性面板按钮
annotationPropertyPanelButton、formPropertyPanelButton、measurePropertyPanelButton、editorPropertyPanelButton、redactionPropertyPanelButton。
仅可禁用元素(外壳)
header、pageNavOverlay、thumbnails、layers、outlines、annotation、signature、search。
对话框
signatureDialog、compareSettingDialog、settingsDialog、setPasswordModal、signCreatePanel、downloadSettingDialog、printSettingDialog 等 25+ 个。
确切的 camelCase/kebab-case 字符串定义在
constants/dataElements.js;请始终引用常量而非猜测字符串。
示例
启动时左面板关闭并精简工具栏
UI.closeElement('leftPanel');
UI.disableElements(['printButton', 'downloadButton', 'flattenButton']);打开右面板并切到 Appearance 标签
UI.openElement('rightPanel');
UI.setActiveElementTab('rightPanel', 'Appearance');切换通过 addCustomModal 注册的自定义弹窗
自定义弹窗使用相同的元素 API 通过其 dataElement 控制:
UI.addCustomModal({ dataElement: 'myModal', /* … */ });
UI.openElement('myModal');
// 之后
UI.closeElement('myModal');
// 或完全移除
UI.disableElements(['myModal']);内部行为说明
openElement(dataElement, capability?)——可选第二参数是某些调用方使用的内部能力标志。- 关闭左面板还会调用
core.webViewerPageMode('none')并关闭搜索面板。 setActiveElementTab将ThumbnailsButton映射为core.webViewerPageMode('thumbs'),OutlinesButton映射为'outline'。- 移动端守卫:
setActiveToolMode在移动端阻止separation/measurement并显示不支持移动端对话框;setToolbarGroup有相同守卫。