Mention提及

提及组件。

何时使用#

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

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

代码演示

基本使用

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

自定义建议(含头像)

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

expand codeexpand code
加载中

多行模式。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

向上展开建议。

expand codeexpand code
加载中

自定义建议

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

expand codeexpand code
加载中

渲染提及

expand codeexpand code
加载中

API#

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

nz-mention#

参数说明类型默认值
[nzMentionTrigger]用于指定提及的触发元素 (必须)HTMLTextAreaElement | HTMLInputElement-
[nzMentionSuggestion]自定义建议渲染模板TemplateRef<any>-
[nzLoading]加载中booleanfalse
[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-