1.å¦ä½å¨ç½ç«ä¸å建å¨çº¿è¡¨åï¼
2.开源Vue表单设计器
3.聊聊低代码的表单表单表单引擎
4.可能是你见过最专业的表单方案---解密Formily2.0
5.基于 VUE3 可视化低代码表单设计器
å¦ä½å¨ç½ç«ä¸å建å¨çº¿è¡¨åï¼
å®æ´çå®ç°è¡¨ååè½ï¼éè¦è®¾è®¡ä¸¤ä¸ªæ¹é¢ï¼ä¸æ¯ç¨äºæ述表å对象çHTMLæºä»£ç ï¼äºæ¯å®¢æ·ç«¯çèæ¬ï¼æè æå¡å¨ç«¯ç¨äºå¤çæå¡«åä¿¡æ¯çç¨åºãå建表åéè¦å¨ç½ç«ä»£ç <form> </form> æ ç¾ä¸æ·»å 表åæ以éè¦ç代ç ï¼ä¸»è¦ç±ä¸ä¸ªåºæ¬ç»æé¨åï¼
表åæ ç¾ï¼å å«äºå¤ç表åæ°æ®æç¨CGIç¨åºçURL以åæ°æ®æ交å°æå¡å¨çæ¹æ³ã
表ååï¼å å«äºææ¬æ¡ãå¯ç æ¡ãéèåãå¤è¡ææ¬æ¡ãå¤éæ¡ãåéæ¡ãä¸æéæ©æ¡åæ件ä¸ä¼ æ¡çã
表åæé®ï¼å æ¬æ交æé®ãå¤ä½æé®åä¸è¬æé®ï¼ç¨äºå°æ°æ®ä¼ éå°æå¡å¨ä¸çCGIèæ¬æè åæ¶è¾å ¥ï¼è¿å¯ä»¥ç¨è¡¨åæé®æ¥æ§å¶å ¶ä»å®ä¹äºå¤çèæ¬çå¤çå·¥ä½ã
ä½ç¼å代ç åªéç¨äºä¸äºç®åç表åï¼å¦ææ³è¦å建ä¸äºå¤æç表åå°±éè¦ä½¿ç¨å°å ¶ä»çå·¥å ·äºã
éè¿LTDè¥éSaaSå®å¾®ä¸å¿åå°ï¼å¯ä»¥ç´æ¥è¿è¡è¡¨åç¼è¾å管çï¼å¦å¾ç¤ºï¼
ç¹å¼ç½ç«æ¦åµ-表å管çæ ï¼ç¹å»âè¿å ¥ç®¡çâï¼
å¯ä»¥å¨è¡¨å管çæ å建æ®éä¿¡æ¯å½é表åå交äºå¤æ表å两类ï¼
ç¹å»å建表ååï¼æç §æ示è¾å ¥éè¦å¡«åçä¿¡æ¯ï¼
æåå°±å¯ä»¥å¨è¡¨åå表ä¸çå°ç¼è¾å¥½ç表åäºã
开源Vue表单设计器
开源Vue表单设计器详解
Vue表单设计器是一个开源的创新项目,旨在简化前端开发者在构建动态表单时的源码源码开发过程。它提供了一种直观且灵活的推荐方式来设计和定制各种复杂的表单,无需深入编码即可实现高效开发。表单表单 项目的源码源码首要功能是生成高度可定制的表单,用户可以根据需求选择字段类型、推荐php包月源码布局和验证规则,表单表单轻松构建出符合业务需求的源码源码表单界面。设计师和开发者可以在此基础上进行扩展,推荐满足不同场景的表单表单复杂需求。 在技术选型上,源码源码Vue表单设计器充分利用了Vue.js的推荐强大组件化能力,结合HTML、表单表单CSS和Vue的源码源码指令,实现了组件化的推荐设计和开发模式。此外,它还可能采用了现代前端框架的最佳实践,如Vuex进行状态管理,Webpack进行模块打包和优化,确保了项目的高效运行和稳定性能。 界面展示方面,设计者注重用户体验,界面简洁直观,免费辅助源码网易于上手。无论是表单的预览还是实际应用,都能让用户在轻松愉快的环境中完成设计。丰富的可视化工具和实时预览功能,使得设计过程更加直观和高效。 如果你对这个开源项目感兴趣,可以直接访问源码地址,查看代码、贡献或获取帮助。源码地址提供了项目的最新进展和开发者社区支持,是深入学习和参与该项目的绝佳入口。聊聊低代码的表单引擎
表单在数字化世界的基石作用不容忽视,无论是构建企业服务、内部工具还是面向消费者的C端应用,它的设计直接影响用户体验和业务效率。随着低代码平台的兴起,表单设计成为了创新的重要推动力。
表单可能看似平凡,实则无处不在。从商场会员注册、后台数据录入到各类办公单据、统计调查问卷,VB获取源码卡死甚至是财务报销和税务报表,表单扮演着至关重要的信息收集角色。它的核心目标是用户便捷地提交信息,无论产品类型如何,表单都是构建其功能不可或缺的组成部分。
特别提到的是JNPF表单设计,作为低代码平台的核心功能,它提供了可视化建模工具,如电子表单或表单引擎,让用户能够轻松创建和定制表单。JNPF以Vue低代码表单为基石,通过一键生成源码,释放开发者的创新时间。
尽管JNPF以直观的“拖拽”操作为主,但它也针对专业前端开发者优化,不仅提供全面的配置解决方案,还能简化重复性工作,让开发者专注于高级交互设计。其开放的架构允许开发者深度定制,即使初学者也能在短时间内上手,掌握诸如联动、格式验证等复杂功能。吾爱小说源码
总结来说,低代码中的表单设计并非易事,但它带来的挑战与深度思考的乐趣并存。深入理解并实践低代码,不仅有助于提升产品设计,也是提升业务洞察力的过程。不妨尝试一下,探索低代码表单设计的无限可能吧。
可能是你见过最专业的表单方案---解密Formily2.0
Formily2.0官网:v2.formilyjs.org/,源码地址:github.com/alibaba/formilyjs。项目由笔者发起,特别感谢阿里数字供应链事业部对Formily项目的重视与支持,以及宋思辰为Formily2.0贡献了高性能的@formily/vue组件,潇泽贡献了智能网格布局组件FormGrid。
如果你是初次接触Formily,可以阅读介绍以了解其如何解决表单问题。对于已有使用经验的用户,你会发现Formily2.0的定位从复杂场景扩展到了企业级表单的专业解决方案,专业性体现在以下几个方面:
Formily2.0自信地表示它足够专业,并且在性能优化、依赖关系管理、包设计、vc 源码怎么用答疑成本控制等方面进行了深入改进。
关于性能优化,解决性能问题的关键在于减少初次渲染的阻塞式计算,通过引入Reactive模式并采用类似Mobx的解决方案,优化了性能,同时减少了props脏检查的副作用。此外,引入被动联动模式,借助@formily/reactive,实现了响应式领域模型,大大提高了性能。
依赖关系问题上,移除了styled-components、immerjs和rxjs的依赖,改用组件库自身的样式体系,如antd,或替代方案,如less和scss。这不仅减少了体积,还提高了可控性和稳定性。
在包设计方面,统一组件包到@formily/antd,抽离了@formily/json-schema包,移除了@formily/react-shared-components,确保每个包的职责明确。
答疑成本问题得到缓解,通过定义新Schema Type Void、引入x-decorator/x-decorator-props描述包装器、维护dataSource状态、定义x-reactions响应器概念,以及废弃自动删值的默认行为,使答疑更加清晰。
自定义组件扩展机制采用工厂式注册,使用@formily/reactive实现更优雅的开发方式,引入readPretty模式,使自定义组件更加灵活。
文档体系的完善使得查找文档变得容易,便于维护和使用者查找。
发量问题得到了解决,通过解决所有之前的问题,确保了系统更加高效稳定。
Formily2.0的亮点包括独立的响应式解决方案@formily/reactive,更优雅的开发方式,支持Vue2/Vue3,以及Effects局部状态、智能网格布局、响应式并发渲染等特性。
总结来说,Formily2.0在多个方面进行了全面改进,旨在提供专业级的企业级表单解决方案,通过引入Reactive响应式编程模式,解决了性能、依赖、包设计、答疑成本等核心问题,为开发者提供了一个高效、灵活且易于维护的表单框架。
基于 VUE3 可视化低代码表单设计器
格子表单/GRID-FORM已在Github开源,如能帮到您麻烦给个星点此查看在线文档及演示
楔子
大概4年前,我做了一个简单的动态表单功能,开发人员通过UI界面配置表单(其实就是添加常用的控件,如文本框、下拉框等)就能向用户提供数据查询,反响不错,尤其是偏后端开发的小伙伴。
时至今日,上述功能存在以下问题:
目前书面上已经有不少优秀开源的同类产品,这里列出可二次开发的,同时具备表单渲染、表单设计的工具(截止至年底)
再造个轮子吧
同类型的开源产品各有千秋,适合不同的应用场景,然而跟我想要的还不够契合。权衡后,还是觉得自己弄一个。技术选型为vue3 + naive UI,使用pnpm进行包管理(monorepo结构)。
不同于同类型产品的组件拖拽,我采用栅栏布局来堆积组件(实现起来简单,省事,暂不支持容器嵌套、子表单),通过设置组件占据的格子数可以使其独占一行,故取名GRID-FORM(栅栏表单),源码详见Github。
表单设计器
得益于VUE的响应式,设计器所见即所得显得尤为丝滑,不然得自己手撸监听配置项变动事件及界面重绘。
编辑器分为左中右三个区域(这是业内约定俗成的标准设计),有别于兄弟产品,我把左区域用作表单整体的参数编辑。为方便用户自定义组件,设计器对外暴露组件库参数,并封装了常用的组件(诸如输入框、单选/多选框、日期选择)。
组件分为数据型(对应上图中的输入组件、选择组件)及展示型(上图的展示组件)两类,后者不参与表单提交。
渲染器组件渲染
每个组件有唯一编号,渲染函数为一个Object(key即为组件编号),需要扩展组件时添加对应的渲染函数即可。渲染时属性分为基本信息(名称我用_开头加以区分)及组件层面两类,分别对应了组件渲染函数的两个参数:attrs、props。
渲染引擎处理完属性后,调用Render函数(不同UI库各自实现,使用者可根据业务需要自行覆写)得到组件实例。此处以文本输入框INPUT为例:
默认值
表单项默认值可以填写常量或占位符(在初始化时被模板引擎赋值),占位符格式为${ code},用户可自行扩展处理函数。
校验
此处校验分为非空、内容格式两种
当表单项勾选是否必填,则在提交前渲染器会对该值进行非空检测;若设置了校验正则,则对非空值进行正则表达式校验。
事件&钩子函数
参数说明
数据联动
常规的做法是输入类表单项增加事件(如onChange、onBlur、onFocus等),但是这样操作(实现)繁琐(困难),我的做法只需要填写一处代码(直观简单)
要启用联动需要满足以下条件:
渲染器初始化后,会对勾选监听值变动的表单项开启监听(没错,是每个表单值有独立的监听)从而获取到新旧值。注意,若在回调函数中对form改动会重新触发onChange事件。
示例
适配更多UI库
目前已实现Naive UI、Vant4的渲染器
我封装了渲染器的基础框架(组合式API),帮助使用者根据需要快速适配心仪的UI库。
结语
因个人能力有限,此工具在设计、实现上存在诸多不足,仅作学习交流。