演示地址：https://kerrycodes.github.io/Github：https://github.com/KerryCodes...安装：npmileggostory因为老员工走后，我接手了一个完全由表单组成的发布模块。以前没看过业务源码。后来因为接触到新的需求，就冲进去维护这堆代码。注意我用了量词“沱”，你应该明白我在说什么。由于整个模块缺乏顶层设计，维护成本极高，经常报BUG。于是我开始思考为什么这些表格不能通过拖拽的方式直接生成和维护呢？于是乐高就诞生了。名字来源于Lego乐高，意思是像搭积木一样完成形式的设计。虽然乐高哲学采用了“拖放”这种最直观、最简单的交互方式。但是leggo不适用于非前端人员。Leggo是专业前端开发者提高效率的利器。从一开始，leggo就没有打算做一个大而全的表单配置方案。第一版甚至花了一个下午才完成。所以对于可以实现复杂逻辑的表单组件leggo不会放弃易用性。leggo真正想做的是帮助前端开发者快速构建和维护表单结构，轻松完成那些无脑重复的表单组件。这使得前端开发可以更专注于开发具有特定复杂逻辑交互的表单组件。Leggo保持着几乎完全开放的自由扩展空间。不仅可以自由注册可拖动的表单组件库。通过leggo模板渲染的所有组件也可以很容易地被覆盖、组装或作为一个整体被覆盖。您甚至可以公开各种公共状态和功能以供leggo消费。所以leggo不仅仅适用于简单的表单设计场景，这一切都取决于开发者的大胆拓展。入门成本极低。如果你熟悉React和Antd，你只需要学习1-2个leggoAPI就可以开始在项目中部署。Antd库中的Form、Form.Item及相关输入组件的所有属性和事件仍然可以正常定义和使用。基础应用中后面所有代码的核心就是这一句constleggo=LeggoForm.useLeggo(schemaModel,middleware,publicStates)，希望没有阅读负担。假设你已经通过leggoformdesigner生成了一个表单模板（获取一个JSON对象，即下面代码中的schemaModel），只需要下面2行代码就可以得到实际需要的表单：exportconstschemaModel={//JSON}export{LeggoForm}from'leggo'export{schemaModel}form'./schemaModel'functionMyForm(){constleggo=LeggoForm.useLeggo(schemaModel)return}我们导出了LeggoForm来自leggo，而schemaModel是leggo表单设计器生成的JSON，高层组件LeggoForm会将模板JSON解析渲染成实际的表单组件。从使用的角度来看，LeggoForm和Antd中的Form几乎没有区别（除了必须挂载属性leggo）。你可以在LeggoForm上定义Form组件允许的任何属性，它会正常工作，像这样：={leggo}form={form}labelCol={span:6}wrapperCol={span:14}onValuesChange={handleValuesChange}onFinish={hanldeFinish}.../>)}考虑到你的表单模板schemaModel可能不存在如果你需要异步和远程从服务器拉取，你可以像这样部署它：(schemaModel)},[schemaModel])return()}一个简单的表单就足以通过上面的代码部署应用程序。下面我们逐步介绍更复杂的场景。下面是我们需要的一个表单组件。您会注意到组件右侧有一个“同步”按钮。没有办法通过拖拽的方式来完成这个个性化组件的整个设计。别着急，我们拖拽一下，完成左侧经典表单组件的设计。我们只需要在渲染表单之前通过中间件函数注入右侧的按钮即可。中间件功能是leggo中表单渲染前灵活扩展的手段之一。代码如下：import{TConfigs}from'leggo/lib/interface';functionMyForm(){constleggo=LeggoForm.useLeggo(schemaModel,middleware)const[form]=Form.useForm()//异步情况//useEffect(()=>{//leggo.resetSchemaModel(schemaModel,middleware)//},[schemaModel])return}//定义一个中间件函数functionmiddleware(configs:TConfigs){configs.Successor=(props:React.PropsWithChildren)=>({props.children}
)值得注意的是，中间件函数只有在注入整个schemaModel时才会执行。无论表单随后如何更新和呈现，中间函数都不会运行（除非您通过leggo.resetSchemaModel重新注入一个新的schemaModel）。因此您无需担心中间件功能可能导致的性能问题。您会注意到leggo引擎在运行中间件函数时将参数configs注入到中间件函数中。这个对象很重要，它来自于schemaModel，你通过leggoformdesigner拖拽设置的参数几乎都存在于这个对象中。其实我们就是通过中间件函数对表单设计器生成的schemaModel进行改造。配置中有两个关键属性itemProps和inputProps。itemPropsitemProps中包含的参数有name、label、rules等，没错，这个对象会直接注入到Form.Item组件中：
