home Free source codetext

Create product

An efficient Vue low-code form designer that supports one-click source code generation

lllll Free source code

2022-09-14 1 1,055

Resource Number 38420 Last Updated 2025-02-24

¥ 0USD Upgrade VIP Enjoy the privilege of downloading massive resources for free

Like (0) collect(1)

Download Now Matters needing attention

Can't download? Please contact customer service to submit a link error!

Value-added Service： Installation Guide Environment Configuration Secondary Development Template Modification Source Code Installation

Details Introduction
Frequently asked questions
Related Article
Post comments

Consult immediately

In this issue, we recommend an efficient Vue low-code form, which is fully visualized and supports one-click generation of source code – Variant Form.

An efficient Vue low-code form designer that supports one-click source code generation插图

VForm is a low-code form based on Vue 2 and Vue 3, which supports Element UI and iView (Ant Design Vue will be supported soon), and is positioned to provide front-end developers with the ability to quickly build forms, realize form interaction and data collection.

VForm is composed of two parts: VFormDesigner, which generates JSON form objects by dragging and dropping components, and VFormRender, which is responsible for rendering form JSON as Vue components.

Application scenarios: automatic front-end code generation, workflow form design, business management background form editing, general CRUD new/edit forms, data collection (registration forms, application forms, health daily, etc.), questionnaires, low-code development platforms, dynamic form customization, and mobile form design.

Features
Drag-and-drop visual form design, what you see is what you get
Rich form component support, including more than 20 basic form components and advanced components
Supports multiple layout containers, including grids, tables, tabs, and subforms
Expose component interaction events to handle complex interaction logic
Provides a rich set of component API methods
The built-in AXIOS library is convenient for integration and interaction with back-end interfaces
Provides rich component property settings
Support for custom CSS styling
The field component supports custom validation logic
Support multi-language internationalization, built-in Chinese and English two languages
Support PC/H5 form design mode
The form design supports the functions of undoing and redoing history
Good openness, support for extension component API methods
It supports popular browsers such as Chrome, FireFox, Safari, Edge, etc., and is compatible with IE 11 browser
Support browser caching function, automatically save the latest status of the form, no need to worry about the loss of work results
You can export Vue components or HTML source code for easy integration in historical projects
One-click generation of SFC single-file component code, which supports Vue2 and Vue3
The raster container supports PC/Pad/H5 multi-terminal responsive layout
Built-in form template function, common form template, one-click generation
Component hierarchical tree view is supported
Screenshot of the feature

Drag and drop components

An efficient Vue low-code form designer that supports one-click source code generation插图1

Preview

An efficient Vue low-code form designer that supports one-click source code generation插图2

Import JSON

An efficient Vue low-code form designer that supports one-click source code generation插图4

Export JSON

An efficient Vue low-code form designer that supports one-click source code generation插图5

Export the code

An efficient Vue low-code form designer that supports one-click source code generation插图6

SFC is generated

An efficient Vue low-code form designer that supports one-click source code generation插图8

Install VForm

Method 1

VForm depends on the Element UI and needs to be installed first.

Using npm:

Install element-ui

npm i element-ui

Install VForm

npm i vform-builds

Or use yarn:

Install element-ui

yarn add element-ui

Install VForm

yarn add vform-builds

Method two

CDN ingestion, suitable for using components directly in HTML.

1. Git clone VFormBuilds:

https://gitee.com/vdpadmin/VFormBuilds

2. Upload the 6 files in the dist directory to the web server or CDN

3. Introduce js and css in HTML as follows:

a. Use the Form Designer component VFormDesigner in HTML

<!DOCTYPE html>

<html>

<head>

<title>VForm Designer Demo</title>

</head>

<body>

<v-form-designer ref=”VFDesigner”></v-form-designer>

</div>

if (!! window. ActiveXObject || “ActiveXObject” in window) { //IE load polyfill.js for Promise

var scriptEle = document.createElement(“script”);

scriptEle.type = “text/javascript”;

scriptEle.src = “https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js”

document.body.appendChild(scriptEle)

}

</script>

new Vue({

el: ‘#app’,

});

</script>

</body>

</html>

b. Use the form renderer component VFormRender in HTML

<!DOCTYPE html>

<html>

<head>

<title>VForm Demo</title>

</style>

</head>

<body>

<v-form-render :form-json=”formJson” :form-data=”formData” :option-data=”optionData” ref=”vFormRef”>

</v-form-render>

<el-button type=”primary” @click=”submitForm”>Submit</el-button>

</div>

if (!! window. ActiveXObject || “ActiveXObject” in window) { //IE load polyfill.js for Promise

var scriptEle = document.createElement(“script”);

scriptEle.type = “text/javascript”;

scriptEle.src = “https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js”

document.body.appendChild(scriptEle)

}

</script>

new Vue({

el: ‘#app’,

data: {

formJson: {“widgetList”:[],”formConfig”:{“labelWidth”:80,”labelPosition”:”left”,”size”:””,”labelAlign”:”label-left-align”,”cssCode”:””,”customClass”:””,”functions”:””, “layoutType”:”PC”,”onFormCreated”:””,”onFormMounted”:””,”onFormDataChange”:””,”onFormValidate”:””}},

formData: {},

optionData: {}

methods: {

submitForm: function() {

this.$refs.vFormRef.getFormData().then( function(formData) {

// Form Validation OK

alert( JSON.stringify(formData) )

}).catch( function(error) {

// Form Validation Failed

alert(error)

})

}

});

</script>

</body>

</html>

You can read more on your own.

资源下载此资源为免费资源立即下载

Telegram:@John_Software

collect(1) Like (0)

Disclaimer: This article is published by a third party and represents the views of the author only and has nothing to do with this website. This site does not make any guarantee or commitment to the authenticity, completeness and timeliness of this article and all or part of its content, please readers for reference only, and please verify the relevant content. The publication or republication of articles by this website for the purpose of conveying more information does not mean that it endorses its views or confirms its description, nor does it mean that this website is responsible for its authenticity.

Ictcoder Free source code An efficient Vue low-code form designer that supports one-click source code generation https://ictcoder.com/kyym/an-efficient-vue-low-code-form-designer-that-supports-one-click-source-code-generation.html

lllll

Share free open-source source code

Previous article： RBAC-based Net6 backend management framework - BootstrapAdmin

Next article： Dory-Engine is a simple application engine to the cloud

Q&A

What is the delivery method?

1, automatic: after taking the photo, click the (download) link to download; 2. Manual: After taking the photo, contact the seller to issue it or contact the official to find the developer to ship.

View details

How long is the trading cycle?

1, the default transaction cycle of the source code: manual delivery of goods for 1-3 days, and the user payment amount will enter the platform guarantee until the completion of the transaction or 3-7 days can be issued, in case of disputes indefinitely extend the collection amount until the dispute is resolved or refunded!

View details

Matters needing attention

1. Heptalon will permanently archive the process of trading between the two parties and the snapshots of the traded goods to ensure that the transaction is true, effective and safe! 2, Seven PAWS can not guarantee such as "permanent package update", "permanent technical support" and other similar transactions after the merchant commitment, please identify the buyer; 3, in the source code at the same time there is a website demonstration and picture demonstration, and the site is inconsistent with the diagram, the default according to the diagram as the dispute evaluation basis (except for special statements or agreement); 4, in the absence of "no legitimate basis for refund", the commodity written "once sold, no support for refund" and other similar statements, shall be deemed invalid; 5, before the shooting, the transaction content agreed by the two parties on QQ can also be the basis for dispute judgment (agreement and description of the conflict, the agreement shall prevail); 6, because the chat record can be used as the basis for dispute judgment, so when the two sides contact, only communicate with the other party on the QQ and mobile phone number left on the systemhere, in case the other party does not recognize self-commitment. 7, although the probability of disputes is very small, but be sure to retain such important information as chat records, mobile phone messages, etc., in case of disputes, it is convenient for seven PAWS to intervene in rapid processing.

View details

Systemhere declaration

1. As a third-party intermediary platform, Qichou protects the security of the transaction and the rights and interests of both buyers and sellers according to the transaction contract (commodity description, content agreed before the transaction); 2, non-platform online trading projects, any consequences have nothing to do with mutual site; No matter the seller for any reason to require offline transactions, please contact the management report.

View details