logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Mentions
提及

用于在输入中提及某人或某事。
使用import { Mentions } from "antd";
源码components/mentions
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

用法升级 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>
);

代码演示

基本使用

基本使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
异步加载

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义触发字符

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
向上展开

向上展开建议。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自动大小

自适应内容高度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
形态变体

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
配合 Form 使用

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
无效或只读

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code




带移除图标

自定义清除按钮。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义状态

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Mentions

参数说明类型默认值版本
allowClear可以点击清除图标删除内容boolean | { clearIcon?: ReactNode }false5.13.0
autoFocus自动获得焦点booleanfalse
autoSize自适应内容高度,可设置为 true | false 或对象:{ minRows: 2, maxRows: 6 }boolean | objectfalse
defaultValue默认值string-
filterOption自定义过滤逻辑false | (input: string, option: OptionProps) => boolean-
getPopupContainer指定建议框挂载的 HTML 节点() => HTMLElement-
notFoundContent当下拉列表为空时显示的内容ReactNodeNot Found
placement弹出层展示位置top | bottombottom
prefix设置触发关键字string | string[]@
split设置选中项前后分隔符string
status设置校验状态'error' | 'warning'-4.19.0
validateSearch自定义触发验证逻辑(text: string, props: MentionsProps) => void-
value设置值string-
variant形态变体outlined | borderless | filled | underlinedoutlined5.13.0 | underlined: 5.24.0
onBlur失去焦点时触发() => void-
onChange值改变时触发(text: string) => void-
onClear按下清除按钮的回调() => void-5.20.0
onFocus获得焦点时触发() => void-
onResizeresize 回调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-
classNamecss 类名string-
style选项样式React.CSSProperties-

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
activeBg输入框激活状态时背景颜色string#ffffff
activeBorderColor激活态边框色string#1677ff
activeShadow激活态阴影string0 0 0 2px rgba(5,145,255,0.1)
addonBg前/后置标签背景色stringrgba(0,0,0,0.02)
controlItemWidth菜单项高度string | number100
dropdownHeight弹层高度string | number250
errorActiveShadow错误状态时激活态阴影string0 0 0 2px rgba(255,38,5,0.06)
hoverBg输入框hover状态时背景颜色string#ffffff
hoverBorderColor悬浮态边框色string#4096ff
inputFontSize字体大小number14
inputFontSizeLG大号字体大小number16
inputFontSizeSM小号字体大小number14
paddingBlock输入框纵向内边距number4
paddingBlockLG大号输入框纵向内边距number7
paddingBlockSM小号输入框纵向内边距number0
paddingInline输入框横向内边距number11
paddingInlineLG大号输入框横向内边距number11
paddingInlineSM小号输入框横向内边距number7
warningActiveShadow警告状态时激活态阴影string0 0 0 2px rgba(255,215,5,0.1)
zIndexPopup弹层 z-indexnumber1050
全局 Token如何定制?