SuperAPI AI 工具集

syncfusion-angular-mention

前端与建站

查看项目

更新于 10-16 05:01

技能介绍

用途:在 Angular 应用的 contenteditable div、textarea 等目标元素内,输入触发字符(默认 @)时弹出自动补全建议,用于用户标记、话题标签或自定义触发器。

主要能力:通过 target 指定目标元素,dataSource 绑定本地数组(字符串、对象、复杂对象)或远程 DataManager(OData、Web API);fields 映射 text/value/groupBy/iconCss。过滤支持 Contains、StartsWith、EndsWith,可配 minLength、allowSpaces、suggestionCount、debounceDelay。mentionChar 改触发字符,showMentionChar 控制是否连同插入文本显示触发符,suffixText 追加空格或换行。模板包括 item、display、no-records、spinner、group。支持排序 sortOrder、禁用项 fields.disabled 与 disableItem 方法。无障碍符合 WCAG 2.2、Section 508、ADA,键盘为方向键、Enter、Tab、Escape。可配 popupHeight/popupWidth、highlight、ignoreCase、ignoreAccent、requireLeadingSpace、cssClass、locale、enableRtl、enablePersistence、zIndex。

使用方式:安装 @syncfusion/ej2-angular-dropdowns 并导入 MentionModule 与相应 CSS 主题;在模板中用 <ejs-mention [dataSource]="..." [target]="..."> 绑定。远程数据需从 @syncfusion/ej2-data 导入 DataManager、ODataV4Adaptor、Query。安装命令示例:ng add @syncfusion/ej2-angular-dropdowns@33.1.44。

限制与注意:资料建议将包固定到特定版本,安装后核对 lockfile;CSS 从 node_modules 解析,避免无 SRI 从 CDN 引入;远程 URL 应替换为自己的端点,crossDomain 仅在确需且 CORS 校验后启用,转发前清洗用户输入。分类为设计与创作,因组件属 UI 交互能力。