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');
|
|||
|
|
```
|