表单设计器
npm：cgkj-form-generator - npm (npmjs.com)
1. 使用
1.1 设计器 Design
引用方式
import { Design } from 'cgkj-form-generator';
<Design @save="handleSave" :formJson.sync="formJson" :formConf.sync="formConf" />
handleSave({formJson, formConf}){
......
}参数
| 参数名 | 类型 | 必填 | 默认值 | 备注 |
|---|---|---|---|---|
| formJson | Array | 否 | 表单项 json，必须加修饰符.sync | |
| formConf | Object | 否 | defaultFormConf | 表单整体配置，必须加修饰符.sync |
事件回调
| 事件名 | 回调参数 | 说明 |
|---|---|---|
| save | function({formJson, formConf}) | 保存表单的回调 |
2.2 渲染器 Parser
引用方式
import { Parser } from 'cgkj-form-generator';
<Parser
:formConf="formConf"
:formJson="formJson"
:formModel="formModel"
/>参数
| 参数名 | 类型 | 必填 | 默认值 | 备注 |
|---|---|---|---|---|
| formJson | Array | 是 | 表单项 json | |
| formConf | Object | 是 | 表单整体配置 | |
| formModel | Object | 是 | 表单model（各字段的值） |
方法
| 方法名 | 参数 | 说明 |
|---|---|---|
| validate | Function(callback: Function(boolean,object)) | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和表单model |
2. 开发
2.1 概述
引用的部分aiurt-vue组件在dev时有异常尚未解决（好在lib下没问题）
2.2 新增组件
-
在
src\components\generator\config中定义组件配置，在src\components\generator\config\index.js中导出。
-
在src\components\generator\config.js中引入组件，并进行分类。
- **需要注意：**组件的配置方案见代码，是否兼容右面板和渲染器因组件而异，不满足的需进行合理开发。