用途
Syncfusion JavaScript ContextMenu 是一个图形用户界面组件，在用户执行右键点击或触摸长按操作时出现，用于在 Web 应用中提供上下文相关的操作菜单。该技能文档面向使用 Syncfusion TypeScript ContextMenu 组件的开发者，帮助实现右键菜单、嵌套菜单和动态菜单内容。
主要能力
- 嵌套/多级菜单：创建层级化的菜单结构。
- 动态菜单项管理：在运行时添加、移除、启用或禁用菜单项。
- 丰富的样式与模板：支持自定义 CSS、图标和 HTML 模板。
- 事件处理：提供完整生命周期事件，如 beforeOpen、onOpen、onClose、select 等。
- 动画：可配置打开/关闭动画，支持多种效果。
- 数据绑定：从数据源填充菜单。
- 滚动：通过 HScroll/VScroll 为大型菜单提供自动滚动。
- 无障碍：符合 WCAG，支持键盘导航和 ARIA。
- RTL 支持：面向国际应用的从右到左布局。
使用方式
文档按主题组织，并给出对应的参考文件：
- 入门：references/getting-started.md，涵盖安装依赖、配置开发环境、向项目添加 ContextMenu、使用 HTML 和 TypeScript 进行基本组件初始化、带分隔符的首个可运行示例，以及运行和测试应用。
- 菜单结构与模板：references/menu-structure.md，涵盖基于模板的菜单结构、多级和嵌套菜单、分隔符与项目分组、FieldSettings 数据映射配置、自定义项目结构模式。
- 菜单项管理：references/menu-items.md，涵盖动态添加或移除菜单项、以编程方式启用和禁用项目、使用 insertBefore() 和 insertAfter() 方法、管理项目状态和可见性、批量项目操作。
- 交互与事件：references/interactions.md，涵盖以编程方式打开和关闭 ContextMenu、处理生命周期事件（beforeOpen、onOpen、onClose、beforeClose）、响应项目选择（select 事件）、集成由菜单点击触发的对话框、配置动画效果和时序、管理菜单位置和悬停延迟。
- 样式与外观：references/styling.md，涵盖应用 CSS 样式和自定义主题、使用 iconCss 为菜单项添加图标、通过 href 实现 URL 导航、启用从右到左（RTL）布局、应用自定义 CSS 类、使用下划线字符格式化文本。
- 数据绑定：references/data-binding.md，涵盖从数据源填充菜单、绑定到 JSON 数组和集合、从服务器动态更新菜单项、使用 FieldSettings 映射数据字段、实时更新菜单内容。
- 高级功能：references/advanced-features.md，涵盖使用 HScroll/VScroll 实现可滚动菜单、配置 MenuOpenType（Auto、Hover、Click）、应用元素过滤器以选择性触发菜单、启用/禁用 HTML 清理以保障安全、配置持久化和区域设置、无障碍功能和 ARIA 属性。
- API 参考：references/api-reference.md，涵盖约 40 个核心属性的完整文档、MenuItem 结构和配置、可用方法（open、close、enableItems、removeItems、hideItems 等）、事件接口和事件数据结构、动画效果和菜单打开类型、类型定义和枚举。
快速开始示例：
HTML：
<div> <div id="contextmenutarget" style="border: 1px solid #ccc; padding: 20px; width: 300px; height: 200px;"> Right-click here to open the context menu </div> <ul id="contextmenu"></ul> </div>
TypeScript：
import { ContextMenu } from '@syncfusion/ej2-navigations';
// Define menu items const menuItems = [ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }, { separator: true }, { text: 'Link' }, { text: 'Share' } ];
// Initialize ContextMenu const contextMenu = new ContextMenu({ items: menuItems, target: '#contextmenutarget' });
contextMenu.appendTo('#contextmenu');
常见模式：
模式 1：嵌套菜单结构
const menuItems = [ { text: 'Edit', items: [ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' } ] }, { text: 'View', items: [ { text: 'Zoom In' }, { text: 'Zoom Out' } ] } ];
const contextMenu = new ContextMenu({ items: menuItems, target: '#target' });
模式 2：处理菜单项选择
const contextMenu = new ContextMenu({ items: menuItems, target: '#target', select: (args) => { console.log('Selected: ' + args.item.text); // Perform action based on selected item } });
模式 3：动态添加项目
// Add new items after initialization const newItems = [{ text: 'New Option' }]; contextMenu.insertAfter(newItems, 'Edit');
模式 4：动画配置
const contextMenu = new ContextMenu({ items: menuItems, target: '#target', animationSettings: { duration: 400, easing: 'ease', effect: 'SlideDown' // SlideDown, ZoomIn, FadeIn, etc. } });
模式 5：图标与导航
const menuItems = [ { text: 'Edit', iconCss: 'e-icons e-edit' }, { text: 'Delete', iconCss: 'e-icons e-delete' }, { text: 'External Link', url: 'url' } ];
关键属性：
- items（MenuItemModel[]）：菜单项配置。
- target（string）：触发元素的 CSS 选择器。
- animationSettings（MenuAnimationSettingsModel）：动画行为。
- cssClass（string）：自定义 CSS 类。
- enableScrolling（boolean）：为长菜单启用滚动条。
- enableRtl（boolean）：从右到左布局支持。
- showItemOnClick（boolean）：子菜单在点击时打开（而非悬停）。
- hoverDelay（number）：子菜单出现前的延迟（毫秒）。
- filter（string）：用于过滤目标元素的 CSS 选择器。
- itemTemplate（string/Function）：菜单项的自定义模板。
适用场景
- 文件操作：对文件/文件夹执行剪切、复制、粘贴、删除。
- 编辑器菜单：文本编辑器中的格式化选项。
- 网格行操作：对表格/网格行的操作。
- 应用菜单：通用应用上下文菜单。
- 嵌套操作：多级操作（如编辑 → 格式）。
- 动态内容：从服务器加载菜单项。
- 自定义样式：与应用设计匹配的主题化上下文菜单。
- 无障碍：键盘导航和屏幕阅读器支持。
限制
资料未提供关于收费、价格、平台兼容性、性能指标或具体使用步骤之外的限制说明，相关内容暂未提供。