【开源自荐】Everright-formEditor 一个可视化低代码表单编辑器

[Liberty-liu]

推荐项目

• 项目地址：https://github.com/Liberty-liu/Everright-formEditor

• 类别：JS

• 项目标题：一个可视化低代码表单编辑器

• 项目描述：Everright-formEditor是一个免费开源的javascript可视化低代码编辑器，通过gui的界面只需简单的操作即可创建出表单，拥有灵活的交互界面，pc端依赖element-plus，mobile依赖vant,内部有一套适配器，适配element和vant的组件

• 亮点：

1. 可以让用户轻松地生成行和列，并通过简单的拖放操作对它们进行布局和调整。无论是在设计表单还是创建页面，这个功能极大地提高用户的工作效率
2. 编辑器、预览器和配置面板都可以单独使用，可以根据实际需求选择性单独使用配置面板，满足不同场景下的需求
3. 依赖于element-plus和vant框架进行开发。内部提供了适配器进行参数转码，以达到最佳的体现。
4. 内置两种模式：字段与布局不分离、字段与布局分离。
5. 内置了国际化（中文和英文）
6. 逻辑控制器(显隐、必填、只读)

• 截图：

示例

编辑器

预览器

属性面板

逻辑控制

逻辑控制器操作符

Field	等于	不等于	包含	不包含	大于	大于等于	小于	小于等于	区间	等于其中之一	不等于其中之一	属于其中之一	不属于其中之一	为空	不为空
Input	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Email	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
ID number	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Cellphone	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
URL	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Textarea	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Number	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Radio	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Checkbox	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Select	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Time	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (date)	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (datetime)	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (dates)	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Date (daterange)	:white_check_mark:	:white_check_mark:												:white_check_mark:	:white_check_mark:
Rate	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Switch	:white_check_mark:	:white_check_mark:
Slider	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Html	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Cascader	:white_check_mark:	:white_check_mark:												:white_check_mark:	:white_check_mark:
File														:white_check_mark:	:white_check_mark:
Signature														:white_check_mark:	:white_check_mark:
Region										:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:

• 后续更新计划：

1. 将tree结构界面体现出来(内部的数据有了)
2. 目前单元测试覆盖率有些低，只做了逻辑控制器部分，后续慢慢把单元测试覆盖率提上来

知乎：https://zhuanlan.zhihu.com/p/620830979

非常感谢您花时间了解我的项目