介绍

Dynamic Form 是基于 Vue3 开发的一套专注于表单的组件，为了解决表单繁琐的校验、联动、数据交互应运而生，不是大而全的 UI 组件库，主要通过配置的形式使用表单，尽可能达到不写代码实现一个表单的创建，类似于之前基于 Vue2 + Vant2 开发的动态表单模式，具体链接，功能会更强大。

亮点

• 内置表单组件：输入框(Input)、单选框(Radio)、复选框(Checkbox)、开关(Switch)、评分(Rate)、选择器(Picker)、日期选择器(DatePicker)、上传(Upload)；
• 内置的其他组件：按钮(Button)、单元格(Cell)、图标(Icon)、遮罩层(Overlay)、弹出层(Popup)、间距(Space)、图片(Image)；
• 用最少的代码，完成表单的渲染；
• 表单支持分组模式，可将信息录入进行分组展示；
• 与其他 Vant-UI、Element-plus 等组件不同的是，一个表单的渲染通过 JSON 配置即可完成，不需要进行二次封装；
• 表单校验可以与组件业务逻辑可以做到很好的拆分，校验支持扩展等，更多用法参考 https://github.com/D-xuanmo/validator；
• 表单可支持扩展业务场景更多的组件，本质上表单组件只是针对通用逻辑、校验等场景进行封装，每个子组件按统一规范开发即可融入到表单，无需要关心数据层、校验等；
• 更多功能开发中...

组件目前规划

链接

1. 项目仓库：https://github.com/D-xuanmo/dynamic-form
2. 文档地址：https://www.xuanmo.xin/-/dynamic-form
3. Demo：https://www.xuanmo.xin/-/dynamic-form/demo/form
4. 数据校验：https://github.com/D-xuanmo/validator
5. 工具方法：https://github.com/D-xuanmo/javascript-utils
6. 在线演练场：https://run.xuanmo.xin

特别鸣谢

• 感谢 JetBrains 提供的 非商业开源软件开发授权
• 感谢 JasKang 提供的 Markdown 预览方案
• 感谢 三咲智子 提供的在线运行组件方案

License

• 本项目基于 MIT 协议，欢迎有兴趣的朋友一起交流
• Copyright © 2022-PRESENT D-Xuanmo

动态