目录前言物料【FORMContainer】开发物料组件物料Meta信息模版内容修改案例展示结束语前言 之前我们介绍了lowcode-engine一些基础相关内容,接下来我们通过引擎
之前我们介绍了lowcode-engine一些基础相关内容,接下来我们通过引擎实战一些内容,在一些场景当中,我们的默认容器不是页面,而是需要自定义容器。例如,在常见的低代码平台中默认容器是表单容器,通过表单容器类提供布局能力。接下来我们就去实现这个功能。
该物料组件主要是用来存放所有FormItem
,可以设置列数。
接下来我们看代码内容
export interface IFormContainerProps {
// 列数
cols: number;
}
export const FormContainerWrapper = forwardRef<IFormRef | undefined, IFormContainerProps>(function FormContainer({
cols,
children
}, ref) {
const [form] = Form.useForm();
React.useImperativeHandle(ref, () => {
return {
formRef: form
}
}, [])
const getChildren = () => {
if (React.Children.count(children) <= 1) {
return children;
}
const newArray = groupArray(React.Children.toArray(children), cols);
return newArray.map(childs => {
return <Row key={childs?.[0]?.key} gutter={[16, 24]} className={generatorClass('form-container-row')}>
{
childs.map(child => {
const { props } = child;
const name = props.componentId || props.__id;
return <Col key={name} span={24 / cols}>
<Form.Item
label=""
name={name}
rules={[{ required: props.isRequired, message: `${props.title}不能为空!` }]}
>
{child}
</Form.Item>
</Col>;
})
}
</Row>
})
}
const rootClassNames = classNames(generatorClass('form-container'));
return (
<Form form={form} className={rootClassNames}>
{getChildren()}
</Form>
)
});
export class FormContainer extends React.Component<IFormContainerProps, any> {
render() {
return (
<FormContainerWrapper {...this.props} />
)
}
}
在实现的过程中开始使用的hooks组件,发现会有问题,我们用class组件包装了下,就没什么问题了。后续迁去看看源码引擎是怎么加载物料的,再来回答这个问题。
上面的物料组件就有一个cols
需要配置,对用的setter我们可以使用官方提供的RadioGroupSetter
. 由于整个配置模版内容比较多,我只把关键点configure
配置内容说下。
"configure": {
"props": [
{
"title": {
"label": {
"type": "i18n",
"en-US": "cols",
"zh-CN": "列数"
}
},
"name": "cols",
"setter": {
"title": "列数",
"componentName": "RadioGroupSetter",
"isRequired": true,
"props": {
"options": [{
"label": "1列",
"value": 1,
}, {
"label": "2列",
"value": 2,
}, {
"label": "3列",
"value": 3,
}, {
"label": "4列",
"value": 4
}]
},
"initialValue": 1
}
}
],
"supports": {
},
"component": {
// 是否是容器组件,如果是容器组件,别的组件可以放置内容
isContainer: true
},
}
我们看配置内容,一个是设置setter
, 还有比较重要的一点就是在component
下需要配置isContainer
。如果为true,表示内容其它组件可以拖到该容器内。
通过研究lowcode-engine,我们可以知道内容的渲染是通过schema.JSON
来渲染内容。我们只需修改下初始的 schema.json
。加上容器组件,模版内容为
"componentName": "Page",
"id": "node_dockcviv8fo1",
...
"title": "页面",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
// 容器组件
"componentName": "FormContainer",
"id": "node_oclcdgs7nr1",
"props": {
"cols": 2
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
我们看引擎的大纲内容,默认就有表单组件了。
这里有一点需要注意,有些场景,我们需要把容器组件toolbar上的操作给禁用掉,这块比较简单,可以看下官网怎么设置。
我们看一个完整的例子。
以上就是lowcode-engine
设置默认容器。后续我们会接着把案例完善起来。能做到创建表单,表单预览,数据的提交等功能。
更多关于lowcode engine设置默认容器的资料请关注编程网其它相关文章!
--结束END--
本文标题: 阿里低代码框架lowcode-engine设置默认容器详解
本文链接: https://www.lsjlt.com/news/197618.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0