# 提及

- 页面: https://jiguang132.com/zh/resources/ant-design/docs/mentions
- 资源: Ant Design (https://jiguang132.com/zh/resources/ant-design.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design/docs.md

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


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

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

## 代码演示 {#examples}


- 基本使用 · `basic`
- 尺寸 · `size`
- 形态变体 · `variant`
- 异步加载 · `async`
- 配合 Form 使用 · `form`
- 自定义触发字符 · `prefix`
- 无效或只读 · `readonly`
- 向上展开 · `placement`
- 自定义弹出层 · `popupRender`
- 带移除图标 · `allowClear`
- 自动大小 · `autoSize`

- 自定义状态 · `status`
- 自定义语义结构的样式和类 · `style-class`



## API

通用属性参考：[通用属性](#jguang-common-props)

### Mentions

| 参数 | 说明 | 类型 | 默认值 | 版本 | [全局配置](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon?: ReactNode, disabled?: boolean } | false | 5.13.0, disabled: 6.4.0 | 6.4.0 |
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  | × |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| defaultValue | 默认值 | string | - |  | × |
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - |  | × |
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |  | × |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `暂无数据` |  | × |
| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |  | × |
| popupRender | 自定义下拉菜单渲染 | (menu: React.ReactElement) => ReactNode | - | 6.6.0 | × |
| prefix | 设置触发关键字 | string \| string\[] | `@` |  | × |
| split | 设置选中项前后分隔符 | string | ` ` |  | × |
| size | 控件大小 | `large` \| `medium` \| `small` | - |  | × |
| status | 设置校验状态 | 'error' \| 'warning' \| 'success' \| 'validating' | - | 4.19.0 | × |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - |  | × |
| value | 设置值 | string | - |  | × |
| variant | 形态变体 | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | 5.13.0 \| `underlined`: 5.24.0 | 5.19.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](#option) | [] | 5.1.0 | × |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | 6.0.0 |

### Mentions 方法 {#mention-methods}

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

### Option

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

## Semantic DOM

| 语义节点 | 原生说明 | 版本 |
| --- | --- | --- |
| `root` | 根元素，设置行内flex布局、相对定位、内边距和边框样式 | 6.0.0 |
| `textarea` | 文本域元素，设置字体、行高、文本输入和背景样式 | 6.0.0 |
| `suffix` | 后缀元素，包含后缀内容的布局和样式，如清除按钮等 | 6.0.0 |
| `popup` | 弹出框元素，设置绝对定位、层级、背景色、圆角、阴影和下拉选项样式 | 6.0.0 |

语义说明来源: `vendor/components/mentions/demo/_semantic.tsx`

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

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

| 令牌 | 类型 | 原生说明 |
| --- | --- | --- |
| `zIndexPopup` | `number` | 弹层 z-index |
| `dropdownHeight` | `number \| string` | 弹层高度 |
| `controlItemWidth` | `number \| string` | 菜单项高度 |

声明来源: `vendor/components/mentions/style/index.ts`

```ts
import type { CSSObject } from '@ant-design/cssinjs';

import { unit } from '@ant-design/cssinjs';

import {
  genBasicInputStyle,
  genPlaceholderStyle,
  initComponentToken,
  initInputToken,
} from '../../input/style';

import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';

import {
  genBorderlessStyle,
  genDisabledStyle,
  genFilledStyle,
  genOutlinedStyle,
  genUnderlinedStyle,
} from '../../input/style/variants';

import { resetComponent, textEllipsis } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import { genCssVar } from '../../theme/util/genStyleUtils';

export interface ComponentToken extends SharedComponentToken {
  /**
   * @desc 弹层 z-index
   * @descEN z-index of popup
   */
  zIndexPopup: number;
  /**
   * @desc 弹层高度
   * @descEN Height of popup
   */
  dropdownHeight: number | string;
  /**
   * @desc 菜单项高度
   * @descEN Height of menu item
   */
  controlItemWidth: number | string;
}

/**
 * @desc Mentions 组件的 Token
 * @descEN Token for Mentions component
 */
type MentionsToken = FullToken<'Mentions'> &
  SharedInputToken & {
    /**
     * @desc 菜单项内边距
     * @descEN Padding of menu item
     */
    itemPaddingVertical: string | number;
  };
```


## 原生通用属性 {#jguang-common-props}


> Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| style | 自定义样式 | CSSProperties | - |
| className | 自定义类名 | string | - |
| rootClassName | 添加在组件最外层的 className | string | - |
| autoFocus | 自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效 | boolean | false |


## 安装并复现示例

```bash
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
```

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

## 原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

- `vendor/components/mentions/index.tsx`
- `vendor/components/mentions/style/index.ts`

## 来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt