## maker 組件生成器
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
**注意!Rule生成規則的配置項名稱與組件生成器的配置方法名稱相同,配置參數也相同**
#### 內置**組件配置項說明**
1. **props\(Object\)** 組件配置
2. **event\(Object\)** 組件事件配置
3. **slot\(Object\)** 部分組件填充內容配置
4. **validate\(Array\)** 組件驗證規則配置
5. **options\(Array\)** 部分組件選擇項配置
6. **emit\(Array\)** 組件模式下配置使用emit方式觸發的事件
7. **col\(Object\)** 組件布局配置
#### 自定義組件額外支持一下配置項
1. **children\(Array\)** 組件元素生成規則
2. **scopedSlots\(Object\)**
3. **nativeOn\(Object\)**
4. **on\(Object\)**
5. **domProps\(Object\)**
6. **props\(Object\)**
7. **attrs\(Object\)**
8. **style\(Object\)**
9. **class\(Object\)**
10. **directives\(Array\)**
#### template 模板組件支持配置
1. **col\(Object\)**
**[以上配置項說明](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1l)**
#### 使用maker生成器生成組件
> `$formCreate.maker`**指的是 vue內部的**`this.$formCreate.maker`**或者**`window.formCreate.maker`
**自定義組件**
```js
$formCreate.maker.create(componentName) //component為生成組件的名稱
//示例:
maker.create('i-button').props({
type:"primary",
size:"large",
}).on({
"click":()=>{console.log(1);},
}).col({span:8,labelWidth:1}).children([
maker.create('span').domProps({
innerHTML:'測試按鈕'
})
]),
```
**template 模板組件**
```js
$formCreate.maker.createTmp(template,vm)
//示例
maker.createTmp('<i-button @click="onClick" long>字符串測試{{test}}-{{num}}</i-button>',new Vue({
data:{
test:'createTmp渲染',
num:0
},
methods:{
onClick:function(){
this.num++;
}
}
})).col({labelWidth:1})
```
**hidden** 隱藏字段
```js
$formCreate.maker.hidden(field,value)
```
**input** 輸入框
```js
$formCreate.maker.input(title,field,value)
```
**radio** 單選框
```js
$formCreate.maker.radio(title,field,value)
```
**checkbox** 多選框
```js
$formCreate.maker.checkbox(title,field,value) //value為array類型
```
**select** select選擇器
```js
$formCreate.maker.select(title,field,value) //多選是value為array類型
```
**switch** 開關
```js
$formCreate.maker.switch(title,field,value)
```
**datepicker** 日期選擇器
```js
$formCreate.maker.date(title,field,value) //type為daterange或datetimerange時 value為array類型
//OR
$formCreate.maker.datepicker(title,field,value)
```
**timepicker** 時間選擇器
```js
$formCreate.maker.time(title,field,value) //type為timerange時 value為array類型
//OR
$formCreate.maker.timepicker(title,field,value)
```
**inputnumber** 數字輸入框
```js
$formCreate.maker.number(title,field,value)
//OR
$formCreate.maker.inputnumber(title,field,value)
```
**colorpicker** 顏色選擇器
```js
$formCreate.maker.color(title,field,value)
//OR
$formCreate.maker.colorpicker(title,field,value)
```
**cascader** 多級聯動
```js
$formCreate.maker.cascader(title,field,value) //value為array類型
```
**upload** 上傳
```js
$formCreate.maker.upload(title,field,value)
```
**rate** 評分
```js
$formCreate.maker.rate(title,field,value)
```
**slider** 滑塊
```js
$formCreate.maker.slider(title,field,value) //props range為true時 value為array類型
```
**frame** 框架
```js
$formCreate.maker.frame(title,field,value)
```
**tree** 樹形
```js
$formCreate.maker.tree(title,field,value)
```
