首页 前端知识 vue3 vite typescript实现低代码表单编辑器

vue3 vite typescript实现低代码表单编辑器

2024-06-16 09:06:20 前端知识 前端哥 874 438 我要收藏

开源一款可视化动态表单设计器,后期会把该设计器作为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作为一个表单生成器组件,可以在后台等不同平台下载直接使用
  • 组件层级结构树
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12340.html
标签
编辑器
评论
发布的文章

json文件的格式转换

2024-06-21 09:06:48

JSON 现代数据交换的利器

2024-06-21 09:06:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!