# mention (w-mention)

- **Import**: `WMention` from `win-design-next`
- **Tag**: `<w-mention>`
- **说明**: Mention 提及
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/mention.md`

## API

## API

### Attributes

| 属性名                               | 说明                                                       | 类型                                                                         | 默认值     |
| ------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------- | ---------- |
| options                              | 提及选项列表                                               | ^[array]`MentionOption[]`                                                    | `[]`       |
| prefix                               | 触发字段的前缀。 字符串长度必须且只能为 1                  | ^[string] \| ^[array]`string[]`                                              | `'@'`      |
| split                                | 用于拆分提及的字符。 字符串长度必须且只能为 1              | ^[string]                                                                    | `' '`      |
| filter-option                        | 定制筛选器选项逻辑                                         | ^[false] \| ^[Function]`(pattern: string, option: MentionOption) => boolean` | —          |
| placement                            | 设置弹出位置                                               | ^[string]`'bottom' \| 'top'`                                                 | `'bottom'` |
| show-arrow                           | 下拉菜单的内容是否有箭头                                   | ^[boolean]                                                                   | `false`    |
| offset                               | 下拉面板偏移量                                             | ^[number]                                                                    | `0`        |
| whole                                | 当退格键被按下做删除操作时，是否将提及部分作为整体删除     | ^[boolean]                                                                   | `false`    |
| check-is-whole                       | 当退格键被按下做删除操作时，检查是否将提及部分作为整体删除 | ^[Function]`(pattern: string, prefix: string) => boolean`                    | —          |
| loading                              | 提及的下拉面板是否处于加载状态                             | ^[boolean]                                                                   | `false`    |
| model-value / v-model                | 输入值                                                     | ^[string]                                                                    | —          |
| popper-class                         | 自定义浮层类名                                             | ^[string]                                                                    | —          |
| popper-options                       | [popper.js](https://popper.js.org/docs/v2/) 参数           | ^[object] refer to [popper.js doc](https://popper.js.org/docs/v2/)           | —          |
| [input props](./input.md#attributes) | —                                                          | —                                                                            | —          |

### 事件

| 名称                              | 说明                 | 类型                                                         |
| --------------------------------- | -------------------- | ------------------------------------------------------------ |
| search                            | 按下触发字段时触发   | ^[Function]`(pattern: string, prefix: string) => void`       |
| select                            | 当用户选择选项时触发 | ^[Function]`(option: MentionOption, prefix: string) => void` |
| [input events](./input.md#events) | —                    | —                                                            |

### Slots

| 名称                            | 说明                | 类型                                              |
| ------------------------------- | ------------------- | ------------------------------------------------- |
| label                           | 自定义标签内容      | ^[object]`{ item: MentionOption, index: number }` |
| loading                         | 自定义 loading 内容 | —                                                 |
| header                          | 下拉列表顶部的内容  | —                                                 |
| footer                          | 下拉列表底部的内容  | —                                                 |
| [input slots](./input.md#slots) | —                   | —                                                 |

### Exposes

| 名称            | 说明               | 类型                   |     |
| --------------- | ------------------ | ---------------------- | --- |
| input           | w-input 组件实例   | ^[object]`Ref`         |
| tooltip         | w-tooltip 组件实例 | ^[object]`Ref`         |
| dropdownVisible | tooltip 显示状态   | ^[object]`ComputedRef` |
