何时使用

代码演示

基本使用

异步加载

配合 Form 使用

Mention 提及

用于在输入中提及某人或某事。

使用

源码

components/mention

文档

编辑此页

何时使用#

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

代码演示#

基本使用

      加载中

配合 Form 使用

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

      加载中

无效或只读

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

      加载中

头像

自定义建议（含头像）

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

      加载中

自动大小

自适应内容高度。

      加载中

自定义状态

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

      加载中

Outlined

Filled

Borderless

Underlined

形态变体

Mentions 形态变体，可选 outlinedfilledborderlessunderlined 四种形态。

      加载中

20.3.0

异步加载

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

      加载中

自定义触发字符

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

      加载中

向上展开

向上展开建议。

      加载中

自定义建议

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

      加载中

预览

渲染提及

      加载中

带移除图标

自定义清除按钮。

      加载中

20.3.0

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'`	-
`[nzAllowClear]`	支持清除	`boolean`	`false`	20.3.0
`[nzClearIcon]`	自定义的多选框清空图标	`TemplateRef<void>`	-	20.3.0
`[nzVariant]`	形态变体	`'outlined' \| 'filled' \| 'borderless' \| 'underlined'`	`'outlined'`	20.3.0
`[nzValueWith]`	建议选项的取值方法	`(any) => string \| (value: string) => string`	-
`(nzOnSelect)`	下拉框选择建议时回调	`EventEmitter<any>`	-
`(nzOnSearchChange)`	输入框中 @ 变化时回调	`EventEmitter<MentionOnSearchTypes>`	-
`(nzOnClear)`	清空已选项时触发的回调函数	`EventEmitter<void>`	-

方法#

方法名	说明
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`	-

FAQ#

Q：滚动时浮层元素没有跟随滚动位置#

默认情况下，浮层元素使用 body 作为滚动容器，如果使用了其他滚动容器，在自定义滚动容器元素上添加 CdkScrollable 指令。注意：您需要从 @angular/cdk/scrolling 导入 CdkScrollable 指令或 ScrollingModule 模块。