127 lines
3.4 KiB
Markdown
127 lines
3.4 KiB
Markdown
# @aomao/plugin-mention
|
||
|
||
提及插件
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
$ yarn add @aomao/plugin-mention
|
||
```
|
||
|
||
添加到引擎
|
||
|
||
```ts
|
||
import Engine, { EngineInterface } from '@aomao/engine';
|
||
import Mention, { MentionComponent } from '@aomao/plugin-mention';
|
||
|
||
new Engine(...,{ plugins:[Mention], cards: [MentionComponent] })
|
||
```
|
||
|
||
## 可选项
|
||
|
||
```ts
|
||
//使用配置
|
||
new Engine(...,{
|
||
config:{
|
||
"mention":{
|
||
//其它可选项
|
||
...
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
`defaultData`: 默认下拉查询列表展示数据
|
||
|
||
`onSearch`: 查询时的方法，或者配置 action，二选其一
|
||
|
||
`onSelect`: 选中列表中的一项后回调，这里可以返回一个自定义值与 key、name 一起组合成新的值存在 cardValue 里面。并且执行 getList 命令后会一起返回来
|
||
|
||
`onClick`: 在“提及”上单击时触发
|
||
|
||
`onMouseEnter`: 鼠标移入“提及”上时触发
|
||
|
||
`onRender`: 自定义渲染列表
|
||
|
||
`onRenderItem`: 自定义渲染列表项
|
||
|
||
`onLoading`: 自定渲染加载状态
|
||
|
||
`onEmpty`: 自定渲染空状态
|
||
|
||
`action`: 查询地址，始终使用 `GET` 请求，参数 `keyword`
|
||
|
||
`data`: 查询时同时将这些数据一起传到到服务端
|
||
|
||
```ts
|
||
//默认展示的列表数据
|
||
defaultData?: Array<{ key: string, name: string, avatar?: string}>
|
||
//查询时的方法，或者配置 action，二选其一
|
||
onSearch?:(keyword: string) => Promise<Array<{ key: string, name: string, avatar?: string}>>
|
||
//选中列表中的一项后回调，这里可以返回一个自定义值与 key、name 一起组合成新的值存在 cardValue 里面。并且执行 getList 命令后会一起返回来
|
||
onSelect?: (data: {[key:string]: string}) => void | {[key: string]: string}
|
||
//在“提及”上单击事件
|
||
onClick?:(data: {[key:string]: string}) => void
|
||
//鼠标移入“提及”上时触发
|
||
onMouseEnter?:(node: NodeInterface, data: {[key:string]: string}) => void
|
||
//自定义渲染列表，bindItem 可以为列表项绑定需要的属性和事件
|
||
onRender?: (data: MentionItem, root: NodeInterface, bindItem: (node: NodeInterface, data: {[key:string]: string}) => NodeInterface) => Promise<string | NodeInterface | void>;
|
||
//自定义渲染列表项
|
||
onRenderItem?: (item: MentionItem, root: NodeInterface) => string | NodeInterface | void
|
||
// 自定渲染加载状态
|
||
onLoading?: (root: NodeInterface) => string | NodeInterface | void
|
||
// 自定渲染空状态
|
||
onEmpty?: (root: NodeInterface) => string | NodeInterface | void
|
||
/**
|
||
* 查询地址
|
||
*/
|
||
action?: string;
|
||
/**
|
||
* 数据返回类型，默认 json
|
||
*/
|
||
type?: '*' | 'json' | 'xml' | 'html' | 'text' | 'js';
|
||
/**
|
||
* 额外携带数据上传
|
||
*/
|
||
data?: {};
|
||
/**
|
||
* 请求类型，默认 multipart/form-data;
|
||
*/
|
||
contentType?: string;
|
||
/**
|
||
* 解析上传后的Respone，返回 result:是否成功，data:成功：文件地址，失败：错误信息
|
||
*/
|
||
parse?: (
|
||
response: any,
|
||
) => {
|
||
result: boolean;
|
||
data: Array<{ key: string, name: string, avatar?: string}>;
|
||
};
|
||
|
||
```
|
||
|
||
### 解析服务端响应数据
|
||
|
||
`result`: true 上传成功，data 数据集合。false 上传失败，data 为错误消息
|
||
|
||
```ts
|
||
/**
|
||
* 解析上传后的Respone，返回 result:是否成功，data:成功：文件地址，失败：错误信息
|
||
*/
|
||
parse?: (
|
||
response: any,
|
||
) => {
|
||
result: boolean;
|
||
data: Array<{ key: string, name: string, avatar?: string}>;
|
||
};
|
||
```
|
||
|
||
## 插件方法
|
||
|
||
获取文档中所有的提及
|
||
|
||
```ts
|
||
//返回 Array<{ key: string, name: string}>
|
||
engine.command.executeMethod('mention', 'getList');
|
||
```
|