基本使用

异步加载

配合 Form 使用

自定义触发字符

无效或只读

Mention提及

提及组件。

何时使用#

用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

import { NzMentionModule } from 'ng-zorro-antd/mention';

代码演示

基本使用

      加载中

配合 Form 使用

受控模式，例如配合 Form 使用。

      加载中

无效或只读

通过 disabled 属性设置是否生效。通过 readOnly 属性设置是否只读。

      加载中

头像

自定义建议（含头像）

注意，nzSuggestions 不为 string[] 时，需要提供 nzValueWith。

      加载中

多行

多行模式。

      加载中

自定义状态

使用 nzStatus 为 Mentions 添加状态。可选 error 或者 warning。

      加载中

异步加载

匹配内容列表为异步返回时。

      加载中

自定义触发字符

通过 nzPrefix 属性自定义触发字符。默认为 @, 可以定义为数组。

      加载中

向上展开

向上展开建议。

      加载中

自定义建议

注意，nzSuggestions 不为 string[] 时，需要提供 nzValueWith。

      加载中

预览

渲染提及

      加载中

API#

<nz-mention [nzSuggestions]="suggestions">
  <textarea nz-input [(ngModel)]="value" nzMentionTrigger> </textarea>
</nz-mention>

nz-mentioncomponent#

参数	说明	类型	默认值
`[nzMentionTrigger]`	用于指定提及的触发元素 (必须)	`HTMLTextAreaElement \| HTMLInputElement`	-
`[nzMentionSuggestion]`	自定义建议渲染模板	`TemplateRef<any>`	-
`[nzLoading]`	加载中	`boolean`	`false`
`[nzNotFoundContent]`	未找到时的内容	`string`	`'无匹配结果，轻敲空格完成输入'`
`[nzPlacement]`	建议框位置	`'bottom' \| 'top'`	`'bottom'`
`[nzPrefix]`	触发弹出下拉框的字符	`string \| string[]`	`'@'`
`[nzSuggestions]`	建议内容	`any[]`	`[]`
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-
`[nzValueWith]`	建议选项的取值方法	`(any) => string \| (value: string) => string`
`(nzOnSelect)`	下拉框选择建议时回调	`EventEmitter<any>`	-
`(nzOnSearchChange)`	输入框中 @ 变化时回调	`EventEmitter<MentionOnSearchTypes>`	-

方法#

方法名	说明
getMentions	获取 `input[nzMentionTrigger]` 中的提及数组

nzMentionTrigger#

用于指定提及的触发元素

<nz-mention>
  <textarea nzMentionTrigger></textarea>
</nz-mention>

<nz-mention>
  <input nzMentionTrigger />
</nz-mention>

nzMentionSuggestion#

自定义建议渲染模板

<nz-mention [nzSuggestions]="items" [nzValueWith]="valueWith">
  <input nz-input nzMentionTrigger />
  <ng-container *nzMentionSuggestion="let item">
    <span>{{ item.label }} - {{ item.value }}</span>
  </ng-container>
</nz-mention>

MentionOnSearchTypes#

参数	说明	类型	默认值
value	搜索关键词	`string`	-
prefix	触发前缀	`string`	-