提及 Mentions - Ant Design

提及组件。

何时使用

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

5.1.0 用法升级

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

// >=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>
);

代码演示

基本使用

基本使用。

配合 Form 使用

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

无效或只读

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

自动大小

自适应内容高度。

异步加载

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

自定义触发字符

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

向上展开

向上展开建议。

自定义状态

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

API

通用属性参考：通用属性

Mentions

参数	说明	类型	默认值	版本
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	-
onBlur	失去焦点时触发	() => void	-
onChange	值改变时触发	(text: string) => void	-
onFocus	获得焦点时触发	() => void	-
onResize	resize 回调	function({ width, height })	-
onSearch	搜索时触发	(text: string, prefix: string) => void	-
onSelect	选择选项时触发	(option: OptionProps, prefix: string) => void	-
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 名称	描述	类型	默认值
activeBorderColor	激活态边框色	string	#4096ff
activeShadow	激活态阴影	string	0 0 0 2px rgba(5, 145, 255, 0.1)
addonBg	前/后置标签背景色	string	rgba(0, 0, 0, 0.02)
controlItemWidth	菜单项高度	number	100
dropdownHeight	弹层高度	number	250
errorActiveShadow	错误状态时激活态阴影	string	0 0 0 2px rgba(255, 38, 5, 0.06)
hoverBorderColor	悬浮态边框色	string	#4096ff
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

Ant Design

Ant Design

Mentions
提及

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

组件 Token如何定制？

全局 Token如何定制？

Mentions提及更新日志

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

主题变量（Design Token）

组件 Token如何定制？

全局 Token如何定制？

Mentions
提及