今天继续给小伙伴们分享一款超强大的Vue表单生成器FormCreate。

form-create 一款 star高达2.2K+ 可通过JSON生成动态渲染、验证和提交功能的表单生成器。支持生成Vue组件，内置17种常用组件及自定义组件。

功能特性

• 支持 3种 UI框架
• 双向数据绑定
• 支持使用 JSON 数据生成表单
• 栅格布局
• 内置组件缓存功能，提升渲染速度
• 内置组件生成器，可快速生成组件规则
• 支持自定义生成任何组件，提升表单的灵活性

支持

• iViewUI 2.13.0+、iViewUI 3.x、iViewUI 4.x
• ElementUI 2.8.2+
• Ant-design-vue 1.5.3+

安装

// element-ui 版本表单生成器
$ npm i @form-create/element-ui -S

// iView 2.x|3.x 版本表单生成器
$ npm i @form-create/iview -S

// iView 4.x 版本表单生成器
$ npm i @form-create/iview4 -S

// Ant-design-vue 1.5.3+ 版本表单生成器
$ npm i @form-create/ant-design-vue -S

引入

// ElementUI方式引入
import formCreate, {maker} from '@form-create/element-ui'

// iView方式引入
import formCreate, {maker} from '@form-create/iview'
//或者
import formCreate, {maker} from '@form-create/iview4'

// AntDesignVue方式引入
import formCreate, {maker} from '@form-create/ant-design-vue'

使用插件

以iview版本为例介绍如何在项目中使用 form-create。

<template>
  <div id="app">
    <form-create v-model="fApi" :rule="rule" :option="option"></form-create>
  </div>
</template>
<script>
export default {
  data () {
    return {
     //实例对象
     fApi:{},
     //表单生成规则
     rule:[
       {
          type:'input',
          field:'goods_name',
          title:'商品名称'
        },
        {
          type:'datePicker',
          field:'created_at',
          title:'创建时间'
        }
     ],
     //组件参数配置
     option:{
       //表单提交事件
       onSubmit:function (formData) {
         alert(JSON.stringify(formData));
       }
     }
    };
  }
};
</script>

另外还支持第三方组件 富文本、Markdown编辑器、JSON编辑器及代码编辑器。

非常优秀的一款Vue表单创建器组件，喜欢的朋友千万不要错过哟~~

# 文档地址
http://form-create.com/v2/

# 仓库地址
https://github.com/xaboy/form-create

ok，就介绍到这里。希望对大家有所帮助哈！