An efficient Vue low code form designer, support one key generation source code


Open Source Picks is where we share the best projects in the Github, Gitee and other open source communities, including technical, learning, practical and interesting content.This issue recommends an efficient Vue low code Form, fully visual design, support one-click source code – Variant Form.VForm is a low-code form based on Vue 2 and Vue 3. It supports Element UI and iView UI libraries (Ant Design Vue is coming soon) and is positioned to provide front-end developers with the ability to quickly build forms, implement form interaction and collect data.VForm consists of a form designer, VFormDesigner, which drags components to generate jSON-formatted form objects, and a form renderer, VFormRender, which renders the form JSON into a Vue component.Application scenarios: front-end code automatic generation, workflow form design, business management background form editing, general CRUD new/edit form, data collection (application form, application form, health daily, etc.), questionnaire survey, low code development platform, dynamic form customization, mobile form design.Feature drag-and-drop visual form design, what you see is what you get rich form components support, contains more than 20 form basic components and advanced components that support a variety of layout container, including grid, tables, TAB, subform expose component interaction events, can handle complex interaction logic provide a rich API methods built-in axios components library,Easy integration and interaction with the back-end interface provides rich component property Settings support customization CSS style Settings Field components support customization verification logic Support multi-language internationalization, built-in Chinese and English two languages support PC/H5 two form design modes Form design support undo, redo history good function openness,Support extension component API method Support Chrome, FireFox, Safari, Edge and other popular browsers, compatible with IE 11 browser support browser cache function, automatically save the latest form status, do not worry about the loss of work results can be exported Vue components or HTML source code,Convenient integration of one-click generation of SFC single file component code in history projects, support Vue2, Vue3 two versions of the grid container support PC/Pad/H5 multi-terminal responsive layout built-in form template function,Common forms template-based, one-click generation Component hierarchy tree View Screenshot Drag and drop component preview Import JSON Export JSON export code generation SFC Install VForm Method 1 The VForm depends on the Element UI, and you need to install the Element UI first.Use NPM: // Install elemental-uinpm I elemental-ui // Install VFormnpm I vform-builds or use YARN:// Install element-uiyarn add element-ui// Install VFormyarn add vform-builds.1. The git clone VFormBuilds: https://gitee.com/vdpadmin/VFormBuilds 2.Upload 6 files from dist to Web server or CDN3. Introduce JS and CSS into HTML, as shown below: a.Use the form Designer component VFormDesigner VForm Designer Demo 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. The body. The appendChild (scriptEle)} new Vue({el: '#app'});B. Use the form renderer component VFormRender VForm Demo 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) }) } } });More content you can go to read.Making warehouse: https://github.com/vform666/variant-form

Leave a Reply

Your email address will not be published.