Everright-formEditor
简体中文 | English
Everright-formEditor is a free and open source javascript visual low-code editor. It can create forms with simple operations through the GUI interface. It has a flexible interaction. The PC depends on element-plus while the mobile depends on vant. There is a set of adapters to convert parameters into ones that can be recognized by both element-plus and vant.
Features
- 1.Support Chinese and English
- 2.Support Pc and Mobile
- 3.Rich fields and layout containers
- 4.Flexible interaction
- 5.Fields and layout separated
- 6.Fields and layout not separated
- 7.The editor, previewer, and configuration panel can all be used separately
- 8.Logical controller (Visible, Required, Read only)
Docs
Examples
-
Editor
layoutType1: Fields and layout not separated
-
Editor
layoutType2: Fields and layout separated
-
Preview
layoutType1: Fields and layout not separated
-
Preview
layoutType2: Fields and layout separated
-
Config panel
Various properties for displaying and editing form fields are provided, including basic information, types, layouts, and so on
Screenshot
Logical controller
Fields adaptation
Type | Pc | Mobile |
---|---|---|
Input | ||
ID | ||
Cellphone | ||
URL | ||
Textarea | ||
Number | ||
Radio | ||
Checkbox | ||
Select | ||
Time | ||
Date | ||
Rate | ||
Switch | ||
Slider | ||
Html | ||
Cascader | ||
File | ||
Signature | ||
Region |
Containers adaptation
Type | Pc | Mobile |
---|---|---|
Grid | ||
Table | ||
Tabs | ||
Collapse | ||
Divider |
Logical controller operator
Field | Equal | Not equal | Contains | Not contain | Greater than | Greater than or equal to | Less than | Less than or equal to | Between | Equal to one of | Not equal to one of | Belong to one of | Not belong to one of | Empty | Not empty |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Input | |||||||||||||||
ID number | |||||||||||||||
Cellphone | |||||||||||||||
URL | |||||||||||||||
Textarea | |||||||||||||||
Number | |||||||||||||||
Radio | |||||||||||||||
Checkbox | |||||||||||||||
Select | |||||||||||||||
Time | |||||||||||||||
Date (date) | |||||||||||||||
Date (datetime) | |||||||||||||||
Date (dates) | |||||||||||||||
Date (daterange) | |||||||||||||||
Rate | |||||||||||||||
Switch | |||||||||||||||
Slider | |||||||||||||||
Html | |||||||||||||||
Cascader | |||||||||||||||
File | |||||||||||||||
Signature | |||||||||||||||
Region |
Sponsor
Powerful JavaScript IDE WebStorm from Jetbrains.
/** 一,修改表单属性参数 Everright-formEditor-main\packages\formEditor\components\Panels\Config\components\PropsPanel.vue (1)搜索'唯一标识', 此处创建新的自定义表单dom, 例如自定义:
(2)t()方法是转译方法,用来做国际化翻译 参数是提前定义好的字段名称:Everright-formEditor-main\packages\formEditor\locale\zh-cn.js和 en.js config.propsPanel.customField
target来源于/hooks/use-target,这里会获取到我们当前选中的元素节点,并获取它的参数属性
======================================================================
二,修改表单配置,默认设置字段
Everright-formEditor-main\packages\formEditor\components\Panels\Fields\index.jsx
(1)搜索 预设字段/基础字段/容器, 分别创建不同字段组件, 例如上传图片:
type:组件的名称,需要与 Everright-formEditor-main\packages\formEditor\locale\zh-cn.js和 en.js中的相对应
icon:组件的图标,svg格式,下载后放在 Everright-formEditor-main\packages\icon\svg 文件夹中即可生效
options:组件的属性
{
type: 'uploadImg',
label: '上传图片',
icon: 'uploadImg',
key: '',
id: '',
options: {
isShowLabel: true,
labelWidth: 100,
defaultValue: [],
multiple: false,
action: '',
limit: 1,
size: 5,
accept: '.png,.jpg',
disabled: false,
required: false,
customField: ''
}
}
二,创建新的组件,并设置属性 1.在Everright-formEditor-main\packages\formEditor\components\FormTypes 在文件夹中创建两种文件 pc/mobild 2.在Everright-formEditor-main\packages\formEditor\componentsConfig.js 中定义组件及其属性 3.在Everright-formEditor-main\packages\formEditor\locale\zh-cn.js 和 en.js 中定义组件名字,属性名称和图标 4.在Everright-formEditor-main\packages\formEditor\components\Panels\Config\components\PropsPanel.vue 中创建相应的属性表单并绑定属性名称和值 5.在Everright-formEditor-main\packages\utils\field.js 中配置固有样式属性 6.在Everright-formEditor-main\packages\utils\addContext.js 中配置属性值传参 */