欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

在短短一个月内,打造出一款可视化表单平台

最编程 2024-02-14 16:09:32
...

前言

最近一直听到低代码,低代码平台yyds,一直对低代码好奇。最近有空,用了1个月时间(上班摸鱼,下班死肝)写了一个低代码可视化表单的雏形。

表单界面

image.png

设计表单属性,既要给研发提供便利,又不能限制研发的发挥。最后决定提供所有的API,都可以被覆盖,通过透传props,组件内部处理props,挂载到组件的属性上。

组件相关API设计

1651829655832.jpg

整体表单API设计

image.png

整体的API全部可以通过labelProps覆盖,支持自定义表单样式,分割为不同的模块。不同的模块样式各自独立,需要通过formFields动态设置

表单生成核心逻辑

根据Schmea表单组件进行搭建。根据不同的type值,生成不同的组件。

image.png

接收一个数组对象

在主组件中,处理数组对象,将数组对象生成组件存入数组中,最后把数组放到页面上进行渲染,将部分重要的参数,由父组件分发给子组件。绑定到子组件的props上,子组件内部单独处理这部分参数。

image.png

后记

本人小白一枚,react使用的并不是太熟练。代码中很多地方需要优化,打算近期重新整理一下,重构下整个组件。有志同道合的朋友一起肝吗?

体验地址

推荐阅读