:fire::fire::fire: 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.

Overview

form-create

MIT github document

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

中文 README

Support

  • iview
  • view-design
  • element-ui
  • ant-design-vue

If you have a form component suitable for form-create, please feel free to click here to leave a message

If it helps, you can click on "Star" in the upper right corner. Thank you! The project is still being developed and improved. If there are any 'recommendations or questions, please ask here

本项目QQ讨论群28963712

Update log

  • Preview

demo1

More
  • Form operations

description

demo2

  • group component

description

demo3

  • control configuration

description

demo2

Docs

简体中文 | English

Packages

Name Description
@form-create/iview version npm iview version
@form-create/iview4 version npm view-design version
@form-create/element-ui version npm element-ui version
@form-create/ant-design-vue version npm ant-design-vue version

Example

Legend

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

Install the corresponding version according to the UI you use

iview

npm install @form-create/iview

view-design

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

Import

CDN:

iview

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create/iview -->
<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>

element-ui

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

ant-design-vue

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/[email protected]/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NodeJs:

iview

import formCreate from '@form-create/iview'
Vue.use(formCreate)

element-ui

import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)

Usage

<form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'Modify field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['Click'],
                }
            ]
        }
    }
}

Demo

Download project

$ git clone https://github.com/xaboy/form-create.git
$ cd form-create

Install dependencies

$ npm run bootstrap

iview Demo

$ npm run dev:iview

view-design Demo

$ npm run dev:iview4

element-ui Demo

$ npm run dev:ele

ant-design-vue Demo

$ npm run dev:antd

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | JetBrains

Donation

donation.jpg

Contact

email : [email protected]

License

MIT

Copyright (c) 2018-present xaboy

Comments
  • 怎么批量修改group下item的rules

    怎么批量修改group下item的rules

    版本号 (version)

    1.0.20

    使用的 UI 框架

    element-ui

    问题描述 (Issue)

    怎么批量修改group下item的rules 目前这样修改不是很便捷

    $f.updateRules({
      "filed": {
        props: {
          button: false,
          disabled: true,
          rules: [
            {
              children: [
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}},
                {props: {disabled: true}}
              ]
            }
          ]
        }
      }
    });
    
    新的需求 
    opened by nimiumiu 15
  • 用vue-cli使用有问题呀

    用vue-cli使用有问题呀

    我在项目下 npm install --save form-create

    然后在main.js中 引入并使用 import formCreate from 'form-create' Vue.use(formCreate)

    居然报 This dependency was not found:

    • form-create in ./src/main.js

    To install it, you can run: npm install --save form-create

    请问这是什么原因呢

    bug 
    opened by wxxtqk 11
  • [Bug] control's handle function is not working

    [Bug] control's handle function is not working

    版本号 / version

    @form-create/[email protected]

    UI 框架的版本

    [email protected]

    问题描述

    control: [
      {
          handle: function (val) {
             console.log("didn't show in console")
             return Boolean(x)
          },
          rule: [...]
      }
    ]
    

    复现步骤

    [
      {
        field,
        type: 'select',
        options: ['asd', 'dsa'],
        control: [
          {
            handle: x => {
              console.log("didn't show in console")
              return Boolean(x)
            },
            rule: [
             {
                filed: 'xxx',
                type: 'select',
                options: ['progressbar', 'fraction']
              }
            ]
          }
        ]
      }
    ]
    

    期望的结果

    但handle function 沒有反應,期望要有反應,且xxx select要出現 :) ~ 如果用value 是正常的

    opened by lustan3216 9
  • 在select类型中,给on-query-change事件加上emitPrefix后,事件无效

    在select类型中,给on-query-change事件加上emitPrefix后,事件无效

    1.0.3

    "@form-create/element-ui": "^1.0.3",
    

    "element-ui": "2.11.0",

    在select类型中,给query-change事件加上emitPrefix后,事件无效

    比如articleno-query-change

    期望query-change加了emitPrefix以后还能生效

    opened by CandiceCaiYu 9
  • group 里的disabled属性无效吗?

    group 里的disabled属性无效吗?

    https://jsrun.net/NQhKp/edit 这里面把 function mock() 里的演示组件替换为下面内容,input框设置为禁用,但没效果,用的是iview4

    {
        "type": "group",
        "field": "label",
        "value": [{
                "testf1": "否"
            }
        ],
        "props": {
            "rules": [{
                    "title": "是否f1",
                    "type": "input",
                    "field": "testf1",
                    "value": "否",
                    "props": {
                        "disabled": true
                    },
                    "col": {
                        "span": 12
                    }
                },
            ]
        }
    }
    
    opened by muziling 8
  • fApi.fields()无法获取表单字段

    fApi.fields()无法获取表单字段

    2.5.0-alpha.2

    element-ui

    2.12.0

    在表单加载完成后,使用fApi.fields()函数无法获取表单字段,返回值为[]。(通过fApi.form验证,表单实际有字段)

    在全局配置中,使用mounted属性,在函数中输出fApi.fields()。(规则文件较大,不便展示) 当将规则简化为如下形式后,仍存在此问题。

    [
        {
          type: 'input',
          field: 'projectBase-projectNum',
          title: '选题序号'
        },
        {
          type: 'input',
          field: 'projectBase-projectName',
          title: '项目名称'
        }
    ]
    

    使用fApi.fields()函数可以获取表单字段

    opened by canomh 8
  • form inline true 出现 样式错乱问题

    form inline true 出现 样式错乱问题

    1.0.16

    element-ui

    2.13.2

    form inline true 模式

    表单 都是 display:inline-block 1.提交和重置按钮是浮动,导致布局样式出错。 2.slider ui也出错

    例子example 里的 element-ui 自行修改 即可复现

    布局样式正常,表单无问题

    尽快修改

    opened by 672064406zerui 8
  • iview Upload组件,自定义onSuccess、onRemove方法修改了传给表单的value,会导致无法预览以及移除已上传文件

    iview Upload组件,自定义onSuccess、onRemove方法修改了传给表单的value,会导致无法预览以及移除已上传文件

    onSuccess传递的函数 image image

    iview 自定义onSuccess、onRemove方法修改了传给表单的value,会导致无法预览以及移除已上传文件 image

    image

    image image

    不论用户自定义onSuccess、onRemove函数里修改了self对象自己的value与否,以上传文件应该都可以正常响应预览以及移除文件事件。

    建议修改 parseFile 方法,将文件的 status 属性存放进去。

    opened by nicholasfung68 2
  • upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名

    upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名

    版本号 (version) 
    @form-create/ant-design-vue  3.x
    

    问题描述 (Issue) upload组件 props对象中的listType 默认为 picture-card,更改为text 后,上传成功后 fileList中不显示文件名 1668679699862

    #复现步骤/生成规则 (Duplicate steps/generate rules) rule : { type: 'upload', title: field.fieldName, field: field.fieldCode, value: [], props: { limit: extJson.data || 1, type: extJson.controlType, listType: extJson.controlType === 'pic' ? 'picture-card' : 'text', headers: headers, accept: accept, action: sysConfig.API_URL + '/dev/file/uploadLocalReturnUrl', // 上传成功回调函数 onSuccess: function (file) { console.log(file) if (file.response.result) { file.url = file.response.result } } }, children: extJson.controlType === 'pic' ? [] : [{ type: 'a-button', props: { type: 'dashed', block: true }, children: ['点击上传'] }] }

    期望的结果 (Desired outcome) listType:'text' 的时候 上传成功后显示的 列表 能够显示 文件名

    opened by thpngj 1
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

VueJS Generators 2.9k Dec 27, 2022
Minimal, zero-configuration and fast solution for static site generation in any front-end framework.

Staticit - Introduction Whether you want to increase performance of your web application or improve SEO. Generally you have 2 options, use SSR (Server

Engineerhub 4 Jun 11, 2022
Next generation frontend tooling. It's fast!

Vite ⚡ Next Generation Frontend Tooling ?? Instant Server Start ⚡️ Lightning Fast HMR ??️ Rich Features ?? Optimized Build ?? Universal Plugin Interfa

vite 51.2k Jan 5, 2023
⚡️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dizzy 245 Dec 27, 2022
Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 📋

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt3 ready Composables

Conner 19 Dec 17, 2022
⚡️ Minimal GraphQL Client + Code Generation for Nuxt3

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Documentation Features Z

Conrawl Rogers 245 Dec 27, 2022
Resolve all resource files dynamic publicPath

vite-plugin-dynamic-base ?? Resolve all resource files dynamic publicPath, like Webpack's __webpack_public_path__. Installation npm i vite-plugin-dyna

null 31 Jan 4, 2023
Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

vue2-shortcut Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template. Install $ npm install --save vu

Graxi 37 Aug 14, 2022
Create coupled parent-child component pairs with composition API.

vue-coupled Background See discussion here. This package serves as a POC that: Allows any level of component encapsulation for child components. Suppo

GU Yiling 10 Jul 1, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.

Vue Box-shadows Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows. Add beautiful shadow effects

Andrej Sharapov 29 Nov 14, 2022
Adapter for SvelteKit apps that prerenders your site as a collection of static files for GitHub Pages

svelte-adapter-github Adapter for SvelteKit apps that prerenders your site as a collection of static files for GitHub Pages. Usage Install with npm i

null 36 Sep 20, 2022
🧞‍♂️ MESH·Y is a design tool to generate beautiful & colorful mesh gradients

Meshy is a design tool to generate beautiful & colorful mesh gradients. Generate multiple random variations of Mesh gradients along with cool color customizations. Export PNG image with custom resolution.

Anup Aglawe 255 Dec 22, 2022
A zero-dependencies script to generate sponsors SVG from Patreon

sponsors A zero-dependencies script to generate sponsors SVG from Patreon. Usage Go to https://www.patreon.com/portal/registration/register-clients to

Bjorn Lu 3 Apr 25, 2022
Auto generate the corresponding `.env` file.

unplugin-vue-dotenv Auto generate the corresponding .env file. Install npm i unplugin-vue-dotenv Vite // vite.config.ts import Dotenv from 'unplugin-v

Chris 6 Dec 24, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 5, 2023
✅ Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Abdelrahman Awad 9.4k Dec 26, 2022
Termbase für Übersetung in Form eines Obsidian Vault

lang file-id authors date tags topics en 2ff3822a-cc5f-4474-ab4e-d097dcc3a215 [email protected] 2022-01-06 #needs_completion #readme #winos #setup Readme

null 2 Jan 8, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023