开源一款可视化动态表单设计器,后期会把该设计器作为h5低代码平台的组件配置表单
废话不多说,直接上干货: 点此立即体验
希望各位大佬能给个鼓励,感谢!!! 源码地址
预览动图
相关技术栈
- Vue3
- Typescript
- Vite
- element-plus
- jsoneditor
- wangEditor
- draggable
架构
使用monorepo架构
表单设计器分为两个代码包
starfish-form 表单组件
starfish-editor 表单编辑器
功能
- 所见即所得,拖拽式设计,0上手成本
- 丰富的容器组件和基础组件,多达20多种,后期会不断增加
- 支持多种数据校验方式,必填,内置校验函数,自定义校验
- 支持表单条件展示
- 多种方式对表单进行操作,如快捷键,表单右击操作面板,选中的表单可视化操作
- 支持预览、清空画布、撤销与回退
拖拽式设计
数据校验模式
表单条件展示
普通模式
高级模式
高级操作
快捷键
可视化操作
撤销与回退
表单设计
每个表单都有自定义配置,每个配置可能有不同结果,如布尔值,常量,数组等类型,造成自定义表单开发成本高
starfish表单设计器优势有
- starfish表单设计器,内置了基础配置,如字段名称,标签名称,是否必填,默认值,校验规则,显示条件等
- 每个配置项不用重复开发,复用基础控件
- 可以自定义字段和自定义组件
- 配置项代码量少
// 获取配置项
// 内部定义自定义组件需要哪些配置
{
Text: {
fieldName: "",
label: "标签名称",
tip: "",
placeholder: "",
showRule: "{}",
required: false,
rule: "[]",
default: "",
}
}
formConfig: getFormConfig("Text", [
{ fieldName: "default", component: "Text" },
{ fieldName: "placeholder", component: "Text" },
], []),
// 参数1
组件名称,获取对于配置参数
// 参数2
需要增加的配置参数并复用哪个基础控件
// 参数3
过滤基础配置项,如字段名称,标签名称,是否必填,默认值,校验规则,显示条件等
高级功能
json复制粘贴自动生成表单
后期优化点
- 布局控件预览模式未完成
- 导入导出json
- starfish-editor作为一个表单生成器组件,可以在后台等不同平台下载直接使用
- 组件层级结构树