1 | <p align="center">
|
2 | <a href="http://www.form-create.com">
|
3 | <img width="200" src="http://file.lotkk.com/form-create.png">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 |
|
8 | # form-create
|
9 |
|
10 | [![MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/xaboy/form-create/blob/master/LICENSE)
|
11 | [![github](https://img.shields.io/badge/Author-xaboy-blue.svg)](https://github.com/xaboy)
|
12 | [![version](https://badge.fury.io/js/form-create.svg)](https://www.npmjs.com/package/form-create)
|
13 | [![npm](https://img.shields.io/npm/dt/form-create.svg)](https://www.npmjs.com/package/form-create)
|
14 | [![document](https://img.shields.io/badge/Doc-welcome-red.svg)](http://www.form-create.com)
|
15 | [![JS gzip size](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/xaboy/form-create/dist/form-create.min.js?compression=gzip&label=gzip%20size&style=flat-square)](https://www.npmjs.com/package/form-create) [![Join the chat at https://gitter.im/xaboy/form-create](https://badges.gitter.im/xaboy/form-create.svg)](https://gitter.im/xaboy/form-create?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
16 |
|
17 |
|
18 | **具有动态渲染,数据收集,验证和提交功能的表单生成器,内置17种常用表单组件,支持双向数据绑定,事件扩展,并支持使用json生成内置组件和任何vue组件。**
|
19 |
|
20 |
|
21 | ## 支持
|
22 | - **iViewUI 2.13.0+**
|
23 | - **iViewUI 3.x**
|
24 | - **ElementUI 2.5.2+**
|
25 |
|
26 |
|
27 | > 如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create/issues/new)
|
28 | > 本项目QQ讨论群[28963712](https://jq.qq.com/?_wv=1027&k=54aKUVw)
|
29 |
|
30 | > **form-create V2 即将发布!!! 速度更快,体积更小,扩展更简单.期待的话点个 star 支持一下吧**
|
31 |
|
32 | > [更新日志](http://www.form-create.com/guide/update.html)
|
33 |
|
34 |
|
35 |
|
36 | ![http://file.lotkk.com/demo-live3.gif](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live3.gif)
|
37 | ![http://file.lotkk.com/demo-live2.gif](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live2.gif)
|
38 |
|
39 |
|
40 | ## 文档
|
41 |
|
42 | **[简体中文](http://www.form-create.com/) | [English](http://www.form-create.com/en/)**
|
43 |
|
44 |
|
45 |
|
46 | ## 文件
|
47 |
|
48 | | 文件名 | 说明 |
|
49 | | ------------------ | ---------------------------------------------------------- |
|
50 | | form-create.js | iViewUI 版本 |
|
51 | | form-create.elm.js | ElementUI 版本 |
|
52 |
|
53 |
|
54 |
|
55 | ## 示例
|
56 |
|
57 | - [CRMEB客户管理+电商管理系统](https://gitee.com/ZhongBangKeJi/CRMEB) ([演示站](http://demo25.crmeb.net) 账号:demo 密码:crmeb.com)
|
58 |
|
59 | - [自定义组件 案例](https://github.com/HeyMrLin/fc-demo) ([演示站](http://jeekweb.pro/form-create-demo))
|
60 |
|
61 | - [使用生成器生成](https://jsrun.net/NQhKp/edit)
|
62 |
|
63 | - [使用 json 生成](https://jsrun.net/NQhKp/edit)
|
64 |
|
65 | - [各种示例](https://jsrun.net/user/xaboy)
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | ## 图例
|
71 |
|
72 | ![https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg](https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg)
|
73 |
|
74 |
|
75 |
|
76 | ## 安装
|
77 |
|
78 | ```shell
|
79 | npm install form-create
|
80 | ```
|
81 |
|
82 |
|
83 | ## 引入
|
84 |
|
85 | **CDN:**
|
86 |
|
87 | iviewUI
|
88 | ```html
|
89 | <!-- import Vue.js -->
|
90 | <script src="//vuejs.org/js/vue.min.js"></script>
|
91 | <!-- import stylesheet -->
|
92 | <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
|
93 | <!-- import iView -->
|
94 | <script src="//unpkg.com/iview/dist/iview.min.js"></script>
|
95 | <!-- import form-create/iview -->
|
96 | <script src="//unpkg.com/form-create/dist/form-create.min.js"></script>
|
97 | ```
|
98 |
|
99 | elementUI
|
100 | ```html
|
101 | <!-- import Vue.js -->
|
102 | <script src="//vuejs.org/js/vue.min.js"></script>
|
103 | <!-- import stylesheet -->
|
104 | <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
105 | <!-- import element -->
|
106 | <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
107 | <!-- import form-create/element -->
|
108 | <script src="//unpkg.com/form-create/dist/form-create.elm.min.js"></script>
|
109 | ```
|
110 | **NodeJs:**
|
111 |
|
112 | iviewUI
|
113 | ```js
|
114 | import formCreate from 'form-create'
|
115 | import { maker } from 'form-create'
|
116 | Vue.use(formCreate)
|
117 | ```
|
118 |
|
119 | ElementUI
|
120 | ```js
|
121 | import formCreate from 'form-create/element'
|
122 | import { maker } from 'form-create/element'
|
123 | Vue.use(formCreate)
|
124 | ```
|
125 |
|
126 |
|
127 |
|
128 | ## 使用
|
129 |
|
130 | ```html
|
131 | <form-create ref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>
|
132 | ```
|
133 | NodeJs
|
134 | ```javascript
|
135 | import {maker} from 'form-create'
|
136 | export default {
|
137 | data () {
|
138 | return {
|
139 | fApi:{},
|
140 | model: {},
|
141 | //表单生成规则
|
142 | rule:[
|
143 | maker.input('商品名称','goods_name'),
|
144 | maker.date('创建时间','created_at')
|
145 | ],
|
146 | //组件参数配置
|
147 | option:{
|
148 | //表单提交事件
|
149 | onSubmit:function (formData) {
|
150 | alert(JSON.stringify(formData));
|
151 | }
|
152 | }
|
153 | };
|
154 | },
|
155 | mounted:function(){
|
156 | this.model = this.fApi.model();
|
157 | }
|
158 | };
|
159 | ```
|
160 | Browser
|
161 | ```javascript
|
162 | new Vue({
|
163 | el:'#app1',
|
164 | data:{
|
165 | fApi:{},
|
166 | model: {},
|
167 | rule:[
|
168 | formCreate.maker.input('商品名称','goods_name'),
|
169 | formCreate.maker.date('创建时间','created_at')
|
170 | ],
|
171 | option:{
|
172 | onSubmit:function (formData) {
|
173 | alert(JSON.stringify(formData));
|
174 | }
|
175 | }
|
176 | },
|
177 | mounted:function () {
|
178 | this.model = this.fApi.model();
|
179 | }
|
180 | });
|
181 | ```
|
182 |
|
183 | ## 参考
|
184 |
|
185 | - [Vue](https://github.com/vuejs/vue)
|
186 |
|
187 | - [iViewUI](https://github.com/iview/iview)
|
188 | - [ElementUI](https://github.com/ElemeFE/element)
|
189 |
|
190 | - [async-validator](https://github.com/yiminghe/async-validator)
|
191 |
|
192 | - [PHP版的表单生成器:form-builder](https://github.com/xaboy/form-builder)
|
193 |
|
194 |
|
195 | ## 感谢
|
196 |
|
197 | [时光弧线](https://github.com/shiguanghuxian) | [wxxtqk](https://github.com/wxxtqk) | [williamBoss](https://github.com/williamBoss) | [HeyMrLin](https://github.com/HeyMrLin) | [djkloop](https://github.com/djkloop)
|
198 |
|
199 |
|
200 | ## 捐赠
|
201 |
|
202 | ![donation.jpg](https://raw.githubusercontent.com/xaboy/form-create/dev/images/donation.jpg)
|
203 |
|
204 | ## 联系
|
205 |
|
206 | ##### email : xaboy2005@qq.com
|
207 |
|
208 |
|
209 |
|
210 | ## License
|
211 |
|
212 | [MIT](http://opensource.org/licenses/MIT)
|
213 |
|
214 | Copyright (c) 2018-present xaboy
|