Mentions

何时使用 {#when-to-use}

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

代码演示 {#examples}

<code src="./demo/basic.tsx">基本使用</code> <code src="./demo/size.tsx" version="6.0.0">尺寸</code> <code src="./demo/variant.tsx">形态变体</code> <code src="./demo/async.tsx">异步加载</code> <code src="./demo/form.tsx">配合 Form 使用</code> <code src="./demo/prefix.tsx">自定义触发字符</code> <code src="./demo/readonly.tsx">无效或只读</code> <code src="./demo/placement.tsx">向上展开</code> <code src="./demo/allowClear.tsx">带移除图标</code> <code src="./demo/autoSize.tsx">自动大小</code> <code src="./demo/autosize-textarea-debug.tsx" debug>debug 自动大小</code> <code src="./demo/status.tsx">自定义状态</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/component-token.tsx" debug>组件 Token</code>

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
allowClear	可以点击清除图标删除内容	boolean \| { clearIcon?: ReactNode }	false	5.13.0
autoSize	自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 }	boolean \| object	false
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
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
size	控件大小	`large` \| `medium` \| `small`	-
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
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-

Mentions 方法

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

Option

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

Semantic DOM

主题变量（Design Token）{#design-token}