Lzl-everright-formeditor NPM

English | 简体中文

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

特点

1.支持中文和英文
2.多终端适配
3.丰富的字段和布局容器
4.灵活的交互方式
5.字段与布局分离
6.字段与布局不分离
7.编辑器、预览器和配置面板都可以单独使用
8.逻辑控制器(显隐、必填、只读)

文档

Examples

Editor layoutType1: 字段与布局不分离
Editor layoutType2: 字段与布局分离
Preview layoutType1: 字段与布局不分离
Preview layoutType2: 字段与布局分离
Config panel 用于展示和编辑表单字段的各种属性，包括基础信息、类型、布局等等

截图

yourDesign

逻辑控制器

Logical controlle

字段适配

Field	Pc	Mobile
Input	:white_check_mark:	:white_check_mark:
Email	:white_check_mark:	:white_check_mark:
ID	:white_check_mark:	:white_check_mark:
Cellphone	:white_check_mark:	:white_check_mark:
URL	:white_check_mark:	:white_check_mark:
Textarea	:white_check_mark:	:white_check_mark:
Number	:white_check_mark:	:white_check_mark:
Radio	:white_check_mark:	:white_check_mark:
Checkbox	:white_check_mark:	:white_check_mark:
Select	:white_check_mark:	:white_check_mark:
Time	:white_check_mark:	:white_check_mark:
Date	:white_check_mark:	:white_check_mark:
Rate	:white_check_mark:	:white_check_mark:
Switch	:white_check_mark:	:white_check_mark:
Slider	:white_check_mark:	:white_check_mark:
Html	:white_check_mark:	:white_check_mark:
Cascader	: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:

容器适配

Field	Pc	Mobile
Grid	:white_check_mark:	:white_check_mark:
Table	:white_check_mark:	:x:
Tabs	:white_check_mark:	:white_check_mark:
Collapse	:white_check_mark:	:white_check_mark:
Divider	:white_check_mark:	:white_check_mark:

逻辑控制器操作符

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: