Mentions
提及

提及组件。

何时使用

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

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

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

参数	说明	类型	默认值	版本
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	-

Namu Design

Mentions
提及

Namu Design

Mentions
提及

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

Design Token

组件 Token

全局 Token

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

Design Token

组件 Token

全局 Token

Mentions提及更新日志

Mentions提及更新日志

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

Design Token

组件 Token

全局 Token

何时使用

5.1.0 用法升级

代码演示

API

Mentions

Mentions 方法

Option

Design Token

组件 Token

全局 Token

Mentions
提及

Mentions
提及