formily schema 表单渲染组件
import FormRender from "@hzab/form-render";
// testSchema 为 formily 生成的 schema json
<FormRender schema={testSchema} />;
- 使用 schemaScope 传入全局配置变量,在响应器的动作响应中调用
// schema
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
"parentId": {
"type": "string",
"title": "上级菜单",
"x-decorator": "FormItem",
"x-component": "TreeSelect",
"x-validator": [],
"x-component-props": {},
"x-decorator-props": {},
"x-reactions": {
"fulfill": {
"run": "fetchMenuTree($self);"
}
},
"name": "parentId",
"x-designable-id": "i012z5nbd5z",
"x-index": 0
}
}
}
}
// formRender
<FormRender
schema={testSchema}
schemaScope={{
fetchMenuTree(field) {
// 模拟请求
setTimeout(() => {
// field 目标组件的 配置参数
// 通过 field.component[1] 可以动态配置目标组件的 props
// 树选择器 数据源
field.component[1].treeData = [{ value: 1, label: 1 }];
}, 1000)
},
}}
/>
- 使用 components 传入自定义组件,在 schema 中 x-component 配置对应的组件名称
// schema
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
"parentId": {
"type": "string",
"title": "图标选择器",
"x-decorator": "FormItem",
"x-component": "IconSelect",
"x-validator": [],
"x-component-props": {},
"x-decorator-props": {},
"x-reactions": {},
"name": "parentId",
"x-designable-id": "i012z5nbd5z",
"x-index": 0
}
}
}
}
// formRender
<FormRender
schema={testSchema}
components={{
// 自定义组件
IconSelect() {
return "IconSelect";
},
}}
/>
参数 |
类型 |
必填 |
默认值 |
说明 |
schema |
Object |
是 |
- |
数据信息的 schema |
schemaScope |
Object |
否 |
- |
全局作用域,用于实现协议表达式变量注入 |
layout |
Object |
否 |
horizontal |
表单布局,horizontal vertical \ inline |
initialValues |
Object |
否 |
- |
form 初始值 |
components |
Object |
否 |
- |
自定义组件 |
formOptions |
Object |
否 |
- |
createForm 的参数 |
disabled |
boolean |
否 |
- |
禁用状态 |
readOnly |
boolean |
否 |
- |
只读状态 |
名称 |
参数 |
说明 |
init |
form 实例 |
组件初始化执行 |
{
"form": {
"labelCol": 6,
"wrapperCol": 12
},
"schema": {
"type": "object",
"properties": {
// 参数 key
"parentId": {
"type": "string",
// 参数 label
"title": "上级菜单",
"x-decorator": "FormItem",
// 渲染的组件
"x-component": "TreeSelect",
// 组件校验
"x-validator": [],
// 组件配置
"x-component-props": {
"virtual": true,
"allowClear": true,
"showSearch": true
},
// 容器配置
"x-decorator-props": {},
// 响应器
"x-reactions": {
// 依赖字段
"dependencies": [
{
"property": "value",
"type": "any"
}
],
// 响应动作
"fulfill": {
// 属性响应,只支持 JS 表达式
"state": {
"visible": "{{$deps.menuType === \"C\" || $deps.menuType === \"F\"}}"
},
// 动作响应,支持 JS 语句
"run": "fetchMenuTree($self);"
}
},
// 参数 key
"name": "parentId",
// 组件在编辑器中的 ID(必须唯一)
"x-designable-id": "i012z5nbd5z",
// 组件在表单中的顺序(必须唯一)
"x-index": 0,
// 是否在 table 中展示,目前需要手动添加配置
"inTable": false
}
}
}
}
- 在 config/webpack.config/webpack.config.dev.js 中按需修改 alias 配置的包名,便于本地调试
- 在 example/typings.d.ts 中按需修改 declare module 配置的包名,解决 ts 报错问题
- npm run dev
- example 本地测试代码
- src 组件源码
- lib 组件打包编译后的代码
- 本地运行:npm run dev
- 测试环境打包编译:npm run build-flow-dev
- 生产环境打包编译:npm run build
- 在 config/webpack.config/webpack.config.prod.js 中按需修改 entry 配置的文件名
- 编译组件:npm run build
- 命令:npm publish --access public
- 发布目录:
- 本地配置文件:config/global-config/config.local.js
- 测试环境配置文件:config/global-config/config.flowDev.js
- 生产环境配置文件:config/global-config/config.production.js