createform用法_form-create: 具有动态渲染，数据收集，验证和提交功能的表单生成器，内置17种常用表单组件，支持双向数据绑定，事件扩展，并支持使用json生成内置组件和任何vue组...

form-create V2

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

支持

iViewUI 2.13.0+

iViewUI 3.x

iViewUI 4.x

ElementUI 2.8.2+

Ant-design-vue 1.5.3+

如果您有适合 form-create 的表单组件, 欢迎点击这里留言

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出

本项目QQ讨论群28963712

预览

更多

操作表单

group 组件

control 配置项

文档

包说明

包名

说明

@form-create/iview

@form-create/iview4

@form-create/element-ui

@form-create/ant-design-vue

示例

图例

安装

iview 2.x|3.x

npm install @form-create/iview

iview 4.x

npm install @form-create/iview4

elementUI

npm install @form-create/element-ui

ant-design-vue

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

引入

CDN:

iview

elementUI

ant-design-vue

NodeJs:

iview

import formCreate from '@form-create/iview'

Vue.use(formCreate)

ElementUI

import formCreate from '@form-create/element-ui'

Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'

Vue.use(formCreate)

使用

NodeJs

import {maker} from 'form-create'

export default {

data () {

return {

fApi:{},

model: {},

//表单生成规则

rule:[

maker.input('商品名称','goods_name'),

maker.date('创建时间','created_at')

],

//组件参数配置

option:{

//表单提交事件

onSubmit:function (formData) {

alert(JSON.stringify(formData));

}

}

};

},

mounted:function(){

this.model = this.fApi.model();

}

};

Browser

new Vue({

el:'#app1',

data:{

fApi:{},

model: {},

rule:[

formCreate.maker.input('商品名称','goods_name'),

formCreate.maker.date('创建时间','created_at')

],

option:{

onSubmit:function (formData) {

alert(JSON.stringify(formData));

}

}

},

mounted:function () {

this.model = this.fApi.model();

}

});

示例

下载项目

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

$cdform-create

安装依赖

$npm run bootstrap

查看 Iview 2.x|3.x示例

$npm run dev:iview

查看 Iview 4.x示例

$npm run dev:iview4

查看 ElementUI 示例

$npm run dev:ele

查看 ant-design-vue 示例

$npm run dev:antd

感谢

捐赠

联系

License

Copyright (c) 2018-present xaboy