<p align="center">
<a href="https://github.com/xaboy/form-create">
<img width="200" src="http://file.lotkk.com/form-create.png">
</a>
</p>
<h1 align="center">form-create</h1>
<p align="center">
<a href="https://github.com/xaboy/form-create/blob/master/LICENSE">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
</a>
<a href="https://github.com/xaboy">
<img src="https://img.shields.io/badge/Author-xaboy-blue.svg" />
</a>
<a href="https://www.npmjs.com/package/form-create">
<img src="https://badge.fury.io/js/form-create.svg" alt="version" />
</a>
<a href="https://www.npmjs.com/package/form-create">
<img src="https://img.shields.io/npm/dt/form-create.svg" alt="npm" />
</a>
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/form-create/dist/form-create.min.js?compression=gzip&label=gzip%20size&style=flat-square" alt="JS gzip size">
</p>
**具有數據收集、校驗和提交功能的表單生成器，支持雙向數據綁定和事件擴展，組件包含有復選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,顏色選擇,滑塊,評分,框架,樹型,文件/圖片上傳等功能組件。**
> 1.4.5版本已支持 iview3
[Github](https://github.com/xaboy/form-create) | [Gitee](https://gitee.com/xaboy/form-create) | [Npm](https://www.npmjs.com/package/form-create) | [在線示例](http://jsrun.net/LQhKp)
## 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
### 圖例
### 安裝
```
npm install form-create
```
**OR**
```
git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
```
### 運行
```shell
npm run dev
```
**OR**
`雙擊打開 demo/index.html`
### 引入
瀏覽器:
```markdown
<!-- import Vue 2.5-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/iview@2.14.3/dist/iview.min.js"></script>
<!-- 省市區三級聯動json數據,不使用三級聯動不需要引入 -->
<script src="district/province_city_area.js"></script>
<!-- 模擬數據,實際使用中不需要引入 -->
<script src="demo/mock.js"></script>
<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>
```
NodeJs:
```js
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
//三級聯動數據,不用可以不引入
import 'form-create/district/province_city_area.js'
//示例規則,實際使用中不需要引入
import 'form-create/mock.js'
Vue.use(iView);
Vue.use(formCreat)
```
### 三種模式創建表單
> 說明:
> mock() 為表單生成規則
> root 為表單插入節點
> $f 為表單實例
#### 標簽模式
> **標簽模式下 `rule` 規則發生變化會實時動態渲染表單**
```html
<div id="app1">
<form-create ref="fc" :rule="rule" :option="option"></form-create>
</div>
```
```js
let rules = mock();
new Vue({
el:'#app1',
data:{
//表單生成規則
rule:rules,
//組件參數配置
option:{
//顯示表單重置按鈕
resetBtn:true,
//表單提交事件
onSubmit:function (formData) {
//formData為表單數據
//按鈕進入提交狀態
this.$f.btn.loading();
//重置按鈕禁用
this.$f.resetBtn.disabled();
//重置按鈕恢復正常
//this.$f.resetBtn.disabled();
//按鈕進入可點擊狀態
//this.$f.btn.loading(false);
}
},
//初始化變量
$f: {},
model: {}
},
mounted:function () {
//獲取表單api
this.$f = this.$refs.fc.$f;
//獲取雙向數據綁定的數據規則
this.model = this.$f.model();
}
});
```
#### 構造方法
```html
<div id="app2">
<div id="form-create"></div>
</div>
```
```js
let rules = mock();
new Vue({
el:'#app2',
data:{
//初始化變量
$f:{},
model:{}
},
mounted:function () {
//表單插入的節點
const root = document.getElementById('form-create');
//$f為表單api
this.$f = this.$formCreate(
//表單生成規則
rules,
//組件參數配置
{
el:root,
//顯示表單重置按鈕
resetBtn:true,
//表單提交事件
onSubmit:function (formData) {
//formData為表單數據
//按鈕進入提交狀態
this.$f.btn.loading();
//重置按鈕禁用
this.$f.resetBtn.disabled();
//重置按鈕恢復正常
//this.$f.resetBtn.disabled();
//按鈕進入可點擊狀態
//this.$f.btn.loading(false);
}
});
//獲取雙向數據綁定的數據規則
this.model = this.$f.model();
}
})
```
#### 全局方法
```html
<div id="app3">
<div id="form-create"></div>
</div>
```
```js
//表單插入的節點
var root = document.getElementById('form-create'),rules = mock();
//初始化變量
var $f = {},model = {};
//$f為表單api
$f = window.formCreate(
//表單生成規則
rules,
//組件參數配置
{
el:root,
//顯示表單重置按鈕
resetBtn:true,
//表單提交事件
onSubmit:function (formData) {
//formData為表單數據
//按鈕進入提交狀態
$f.btn.loading();
//重置按鈕禁用
$f.resetBtn.disabled();
//重置按鈕恢復正常
//$f.resetBtn.disabled();
//按鈕進入可點擊狀態
//$f.btn.loading(false);
}
});
//獲取雙向數據綁定的數據規則
model = $f.model();
```
