Mentions
提及

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

使用import { Mentions } from "antd";

源码components/mentions

文档

编辑此页更新日志

何时使用

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

用法升级 5.1.0+

升级提示

在 5.1.0 版本后，我们提供了 <Mentions options={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。

jsx

// >=5.1.0 可用，推荐的写法 ✅
const options = [{ value: 'sample', label: 'sample' }];
return <Mentions options={options} />;

// <5.1.0 可用，>=5.1.0 时不推荐 🙅🏻‍♀️
return (
  <Mentions onChange={onChange}>
    <Mentions.Option value="sample">Sample</Mentions.Option>
  </Mentions>
);

代码演示

基本使用

基本使用。

异步加载

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

自定义触发字符

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

向上展开

向上展开建议。

自动大小

自适应内容高度。

形态变体

Mentions 形态变体，可选 outlined filled borderless underlined 四种形态。

5.13.0

配合 Form 使用

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

无效或只读

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

带移除图标

自定义清除按钮。

自定义状态

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

API

通用属性参考：通用属性

Mentions

参数	说明	类型	默认值	版本
allowClear	可以点击清除图标删除内容	boolean \| { clearIcon?: ReactNode }	false	5.13.0
autoFocus	自动获得焦点	boolean	false
autoSize	自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 }	boolean \| object	false
defaultValue	默认值	string	-
filterOption	自定义过滤逻辑	false \| (input: string, option: OptionProps) => boolean	-
getPopupContainer	指定建议框挂载的 HTML 节点	() => HTMLElement	-
notFoundContent	当下拉列表为空时显示的内容	ReactNode	`Not Found`
placement	弹出层展示位置	`top` \| `bottom`	`bottom`
prefix	设置触发关键字	string \| string[]	`@`
split	设置选中项前后分隔符	string
status	设置校验状态	'error' \| 'warning'	-	4.19.0
validateSearch	自定义触发验证逻辑	(text: string, props: MentionsProps) => void	-
value	设置值	string	-
variant	形态变体	`outlined` \| `borderless` \| `filled` \| `underlined`	`outlined`	5.13.0 \| `underlined`: 5.24.0
onBlur	失去焦点时触发	() => void	-
onChange	值改变时触发	(text: string) => void	-
onClear	按下清除按钮的回调	() => void	-	5.20.0
onFocus	获得焦点时触发	() => void	-
onResize	resize 回调	function({ width, height })	-
onSearch	搜索时触发	(text: string, prefix: string) => void	-
onSelect	选择选项时触发	(option: OptionProps, prefix: string) => void	-
onPopupScroll	滚动时触发	(event: Event) => void	-	5.23.0
options	选项配置	Options	[]	5.1.0

Mentions 方法

名称	描述
blur()	移除焦点
focus()	获取焦点

Option

参数	说明	类型	默认值
value	选择时填充的值	string	-
label	选项的标题	React.ReactNode	-
key	选项的 key 值	string	-
disabled	是否可选	boolean	-
className	css 类名	string	-
style	选项样式	React.CSSProperties	-

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
activeBg	输入框激活状态时背景颜色	string	#ffffff
activeBorderColor	激活态边框色	string	#1677ff
activeShadow	激活态阴影	string	0 0 0 2px rgba(5,145,255,0.1)
addonBg	前/后置标签背景色	string	rgba(0,0,0,0.02)
controlItemWidth	菜单项高度	string \| number	100
dropdownHeight	弹层高度	string \| number	250
errorActiveShadow	错误状态时激活态阴影	string	0 0 0 2px rgba(255,38,5,0.06)
hoverBg	输入框hover状态时背景颜色	string	#ffffff
hoverBorderColor	悬浮态边框色	string	#4096ff
inputFontSize	字体大小	number	14
inputFontSizeLG	大号字体大小	number	16
inputFontSizeSM	小号字体大小	number	14
paddingBlock	输入框纵向内边距	number	4
paddingBlockLG	大号输入框纵向内边距	number	7
paddingBlockSM	小号输入框纵向内边距	number	0
paddingInline	输入框横向内边距	number	11
paddingInlineLG	大号输入框横向内边距	number	11
paddingInlineSM	小号输入框横向内边距	number	7
warningActiveShadow	警告状态时激活态阴影	string	0 0 0 2px rgba(255,215,5,0.1)
zIndexPopup	弹层 z-index	number	1050

全局 Token如何定制？

文档贡献者

// >=5.1.0 可用，推荐的写法 ✅

const options = [{ value: 'sample', label: 'sample' }];

return <Mentions options={options} />;

// <5.1.0 可用，>=5.1.0 时不推荐 🙅🏻‍♀️

return (

<Mentions.Option value="sample">Sample</Mentions.Option>

</Mentions>

);

API

通用属性参考：通用属性

Mentions

参数	说明	类型	默认值	版本
allowClear	可以点击清除图标删除内容	boolean \| { clearIcon?: ReactNode }	false	5.13.0
autoFocus	自动获得焦点	boolean	false
autoSize	自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 }	boolean \| object	false
defaultValue	默认值	string	-
filterOption	自定义过滤逻辑	false \| (input: string, option: OptionProps) => boolean	-
getPopupContainer	指定建议框挂载的 HTML 节点	() => HTMLElement	-
notFoundContent	当下拉列表为空时显示的内容	ReactNode	`Not Found`
placement	弹出层展示位置	`top` \| `bottom`	`bottom`
prefix	设置触发关键字	string \| string[]	`@`
split	设置选中项前后分隔符	string
status	设置校验状态	'error' \| 'warning'	-	4.19.0
validateSearch	自定义触发验证逻辑	(text: string, props: MentionsProps) => void	-
value	设置值	string	-
variant	形态变体	`outlined` \| `borderless` \| `filled` \| `underlined`	`outlined`	5.13.0 \| `underlined`: 5.24.0
onBlur	失去焦点时触发	() => void	-
onChange	值改变时触发	(text: string) => void	-
onClear	按下清除按钮的回调	() => void	-	5.20.0
onFocus	获得焦点时触发	() => void	-
onResize	resize 回调	function({ width, height })	-
onSearch	搜索时触发	(text: string, prefix: string) => void	-
onSelect	选择选项时触发	(option: OptionProps, prefix: string) => void	-
onPopupScroll	滚动时触发	(event: Event) => void	-	5.23.0
options	选项配置	Options	[]	5.1.0

Mentions 方法

名称	描述
blur()	移除焦点
focus()	获取焦点

Option

参数	说明	类型	默认值
value	选择时填充的值	string	-
label	选项的标题	React.ReactNode	-
key	选项的 key 值	string	-
disabled	是否可选	boolean	-
className	css 类名	string	-
style	选项样式	React.CSSProperties	-

Token 名称

描述

类型

默认值

activeBg

输入框激活状态时背景颜色

string

#ffffff

activeBorderColor

激活态边框色

string

#1677ff

activeShadow

激活态阴影

string

0 0 0 2px rgba(5,145,255,0.1)

addonBg

前/后置标签背景色

string

rgba(0,0,0,0.02)

controlItemWidth

菜单项高度

string | number

100

dropdownHeight

弹层高度

string | number

250

errorActiveShadow

错误状态时激活态阴影

string

0 0 0 2px rgba(255,38,5,0.06)

hoverBg

输入框hover状态时背景颜色

string

#ffffff

hoverBorderColor

悬浮态边框色

string

#4096ff

inputFontSize

字体大小

number

inputFontSizeLG

大号字体大小

number

inputFontSizeSM

小号字体大小

number

paddingBlock

输入框纵向内边距

number

paddingBlockLG

大号输入框纵向内边距

number

paddingBlockSM

小号输入框纵向内边距

number

paddingInline

输入框横向内边距

number

paddingInlineLG

大号输入框横向内边距

number

paddingInlineSM

小号输入框横向内边距

number

warningActiveShadow

警告状态时激活态阴影

string

0 0 0 2px rgba(255,215,5,0.1)

zIndexPopup

弹层 z-index

number

1050

Ant Design

Mentions
提及

Ant Design

Mentions
提及

何时使用

用法升级 5.1.0+

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

何时使用

用法升级 5.1.0+

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

Mentions提及

Mentions提及

何时使用

用法升级 5.1.0+

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

何时使用

用法升级 5.1.0+

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

Mentions
提及

Mentions
提及