api-setting
一款API匹配组件。在API集市上，选择需要的API，通过拖拽的方式让页面数据和接口数据匹配。
功能一览
>
安装
npm install api-setting
使用
在main.js中添加以下代码
import apiSetting from 'api-setting'
import 'api-setting/dist/style.css'
const app = createApp(App)
app.use(apiSetting)
app.mount('#app')
在页面中
<ApiSetting
:onRequestApiList="onRequestApiList"
:getServiceDetail="getDetail"
:paramList="paramList"
:editData="editData"
@onClose="onClose"
@onSubmit="onSubmit"
/>
配置项
| 属性 |
说明 |
类型 |
默认值 |
| onRequestApiList |
配置首页的api分页表格数据 |
object：{tableData: array, total:number, success: boolean} |
{tableData: [],total: 0,success: true} |
| getServiceDetail |
配置单个api详细信息的数据。要求函数返回格式为{request, response, requestHeader} |
function |
- |
| paramList |
配置数据，详情见下表 |
object |
- |
| editData |
如果已经配置了关联关系，则把onSubmit的值保存起来，赋值到改字段 |
object |
- |
| drawerSize |
详情弹框大小 |
string |
100% |
paramList
| 属性 |
说明 |
类型 |
默认值 |
| inputData |
页面输入元素 |
array |
|
| outputData |
输出元素 |
array |
|
interface InputData {
id: string;
label?: string;
dataIndex?: string; // 选填，组件提前配置好的对应接口字段名
type?: 'string' | 'number' | 'object' | 'array' | 'date' | 'boolean'; // 默认为'string'
children?: InputData[]; // 当type为’object’、’array’时为复杂数据类型,需要提供数据内部结构children
parent?: String;
status?: 'normal' | 'update' | 'add';
}
interface OutputData {
id: string;
label?: string;
dataIndex?: string; // 选填，组件提前配置好的对应接口字段名
type?: 'text' | 'array' | 'object'; // 默认为'text'
children?: OutputData[]; // 当type为’object’、’array’时为复杂数据类型,需要提供数据内部结构children
status?: 'normal' | 'update' | 'add';
}
事件
| 事件名 |
说明 |
参数 |
| onClose |
弹框关闭时触发 |
- |
| onSubmit |
点击提交时触发 |
({serviceId, request, requestHeader, response, responseCode, rawSubmitData}) |