preface
With the rapid development of Internet, more and more cloud platform rapid rise, inevitable is custom visual design, how through development can not simple fast take out one of the available page became a headache problem, but from development and design a set of visual design function is not a simple matter, Fortunately, there are many open source visual design projects/components available, and today we will take a look at them.
A, FormRender
Easy-to-use cross-component form rendering engine – quickly generates custom form configuration interfaces using JSON Schema
Github number of stars 1938, Github address: github.com/alibaba/for… X-render.gize. IO /form-render protocol
- Follow MIT protocol
- Feel free to enjoy and participate in open source
- As shown in the figure above, quick generation using the Schema editor can achieve low starting cost and fast construction
- Support Ant Design and Fusion Design mainstream visual themes
- Form configuration is described using the JSON Schema standard protocol with type-rich and extensible components
- Support 1 row N, horizontal and vertical row, support object infinite nesting, custom regular check, custom style components, list drag and drop features
- It has been used in aliyun, Taobao, Tmall, Fliggy, AGTech, Security Intelligence, new retail industry workbench, artificial intelligence lab and other BU scenarios. Simple scenarios can also be used in complex scenarios
- There are detailed documents on the use and special support for maintenance
Second, the form – the generator
Element UI form design and code generator to run the generated code directly in element-based VUE projects; You can also export JSON forms and use the accompanying parser to parse the JSON into a real form.
GiteeStar number 1.3K, Gitee address: gitee.com/mrhj/form-g… Demo address: MRHJ.Giei.io/Form-genera… Protocol:
- Follow MIT protocol
Three, the f – render | ElementUI based form designer
F-render is a visual form design tool based on vue-ele-form development, suitable for various process engines and dynamic form projects, greatly saving your development time;
GiteeStar number 1.1K, Gitee address: gitee.com/dream2023/f… Dream2023.gize. IO /f-render/ protocol:
- Not a statement
Fourth, easy – flow
Process designer based on VUE+JsPlumb
Gitee Star number 1938, Gitee address: gitee.com/xiaoka2017/… IO /easy-flow/#
- Conform to the protocol specified in the plug-in used in the project package.json
Function is introduced
- Supports drag and drop to add nodes
- Click on the line to set the condition
- Supports a given data loading flowchart
- Drag-and-drop support
- Support line style, anchor point, type custom overlays
- Supporting force map
