前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Antd (react)风格表单开发最快方案

Antd (react)风格表单开发最快方案

原创
作者头像
工具人
发布2023-03-14 11:12:30
4430
发布2023-03-14 11:12:30
举报

前端表单可视化生成器可以说是非常之多,基本实现比较简单的功能,稍微复杂的就捉襟见肘

那此时面对一个超大的复杂表单难免要血战三天三夜了

那么来看一下如何发可视化方式在半小时搞定一个复杂的表单

先看图吧(简单的就不看了):

这是一个有简单的布局、动态表格、输入 a 后 b 字段被计算、元素和块级联动的功能

这一个有分步的表单,从其它组件选择数据、不同级别联动等

自由搭配,而非固定是我们看到的功能,即看到的功能是我们使用时设计出的功能而不是我们组件中封装了这些功能

更多的示例可以到 开发示例 中自己尝试

使用

如果你的项目使用的是 antd4.x 版本,需要安装一下即可

代码语言:javascript
复制
yarn add freedomen //安装库

如果你想用一个空项目试试,你可以在示例项目中点击下载即可下载一个完整的项目解压后

代码语言:javascript
复制
yarn //安装依赖

yarn start //启动项目

而如果你是想用空项目搭建,那么至少你要安装:

代码语言:javascript
复制
yarn add antd@4.19.5

yarn add freedomen

然后将代码tab中的代码全部复制到对面的页面中即可,如图:

其它

如果不知道组件怎么使用的话还可以查看 视频教程

开发工具不开源,但是生成代码的框架 freedomen 是开源的,即每一行代码都可控也不会有后顾之忧呢

不仅可以开发表单哦,完整的项目也是手到擒来呢~

谢谢大家浪费宝贵的时间来扫一眼

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先看图吧(简单的就不看了):
  • 使用
  • 其它
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档