vue3+vite+typescript实现低代码表单编辑器
开源一款可视化动态表单设计器,后期会把该设计器作为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作为一个表单生成器组件,可以在后台等不同平台下载直接使用
- 组件层级结构树
vue3+vite+typescript实现低代码表单编辑器相关推荐
- 智能应用搭建平台——LCHub低代码表单 vs 流程表单 vs 仪表盘
1. LCHub低代码如何选择 「流程表单」:填报数据,并带有流程审批功能,适合报销.请假申请或其他工作流: 「表单」:填报数据,并带有数据协作功能,如修改.删除.导入.导出,并可以给不同的人不同的管 ...
- 使用 Vue3 + vite + elementUI 开发一个 Utools Markdown 编辑器插件
文章目录 目的 开发文档整理 基础工具的集成 初始化项目 框架引入 按需引用和 SASS 引入验证 utools 开发配置 调试和打包插件 功能实现 依赖库的安装调用 布局实现 Editor.vue ...
- 使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架 这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
- GRID-FORM 基于 VUE3 可视化低代码表单设计器
本文开源代码在 GRID-FORM,如能帮到您麻烦给个星哈 楔子 大概 4 年前,我做了一个简单的动态表单功能,开发人员通过 UI 界面配置表单(其实就是添加常用的控件,如文本框.下拉框等)就能向用户 ...
- 搭建一个基于Vue3+Vite+TypeScript的项目
文章目录 一.前期准备 1.环境准备 2.开发工具 2.技术选型 二.初始化项目 三.工具安装 1.编辑器插件 2.开发插件 最近准备搭建工作室的官方网站,在这里记录一下项目搭建的过程. 一.前期准备 ...
- Vue3+Vite+TypeScript项目开发
技术栈 vue3.0+ vue-router4.0+ vuex4.0+.vuex-persistedstate vite2.0+ typescript element-plus axios App的r ...
- Vue3 + Vite + TypeScript使用Web Worker
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.所以,在我们有大量运算任务时,可以把运算任务交给 Worker 线程去处理,当 Wor ...
- Vue3+Vite+TypeScript+element Plus框架搭建过程(3)
代码地址,request分支:https://gitee.com/lsjWeiYi/vue3-frame/tree/request/ web到此还缺一个http请求功能,然后就可以实现功能了. 当前h ...
- Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
最新文章
- 2021人工智能年度评选结果揭晓!AI落地最佳参考在此奉上
- 剪切板与正则表达式测试
- linux下文件操作
- CCSpriteBatchNode的使用
- 希尔排序听起来有点难,其实很简单
- 时钟在微型计算机中作用,微型计算机系统中的实时时钟
- 小组第十三次站立会议
- 微软反向 RDP 漏洞补丁不当,第三方 RDP 客户端易受攻击
- [leetcode]174. 地下城游戏
- SQL Server 2005混合模式登录配置
- Luogu 3423 [POI 2005]BAN-银行票据 (多重背包单调队列优化 + 方案打印)
- RobotFramework自动化测试框架-移动手机自动化测试Clear Text关键字的使用
- 语音识别(ASR) 阿里云
- RFID图书馆藏书防盗安全门门禁系统的应用分析
- MySQL 免安装版的安装过程
- 【接口时序】5、QSPI Flash的原理与QSPI时序的Verilog实现(转载)https://www.cnblogs.com/liujinggang/p/9651170.html
- 怎么把图片的分辨率调高?如何调整图片分辨率?
- 基于51单片机的自动浇花系统设计/基于51单片机的智能抽奖系统控制设计/基于51单片机的数字时钟与日历显示控制设计 毕业设计
- Sun公司,Oracle公司(10.8)
- CCS/TMS320F28377D: EMIF interface - CS2-CS4 start address configuration CS2-CS4起始地址