## Frame 框架
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
>frame 框架打開的子頁面要關閉時,需要通過調用父級頁面的`$f.closeModel()`方法關閉
#### [在線預覽](https://jsrun.net/mehKp/edit)
#### 舉例:
```js
{
type:"frame",
title:"素材",
field:"fodder",
value:["http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg"],
props:{
type:"image",
src:"iframe.html",
maxLength:2,
},
validate:[
{required:true, type: 'array', min: 2, message: '請選擇2張圖片', trigger: 'change'}
],
}
```
#### maker快速生成:
```js
$formCreate.maker.frame('素材','fodder',["http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg"]).props({
src:"iframe.html",
maxLength:2,
type:"image"
}).validate([
{required:true, type: 'array', min: 2, message: '請選擇2張圖片', trigger: 'change'}
])
```
#### json 生成規則
```json
{
type:"frame",
title:"素材",
field:"fodder",
value:["http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg"],
props:{
type:"image", //frame類型,有input,file,image
src:"iframe.html", //iframe地址
maxLength:2, //value的最大數量
icon:'folder', //打開彈出框的按鈕圖標
height:"220px", //彈出框高度
width:"350px", //彈出框寬度
spin:false, //是否顯示加載動畫
title:"請選擇", //彈出框標題
handleIcon: true, //操作按鈕的圖標 ,設置為false將不顯示,設置為true為默認的預覽圖標,類型為file時默認為false,image類型默認為true
allowRemove:true, //是否可刪除,設置為false是不顯示刪除按鈕
},
validate:[
{required:true, type: 'array', min: 5, message: '請選擇5張圖片', trigger: 'change'}
],
}
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | value,當maxLength等與1時為字符串,其他時為數組 | String,Array | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | frame類型,有input\(字符串\),file\(文件\),image\(圖片\) | String | false | 'input' |
| src | 框架的地址 | String | true | - |
| maxLength | value的最大數量 | Number | false | - |
| icon | 打開彈出框的按鈕圖標 | String | false | 'folder' |
| height | 彈出框高度 | String | false | - |
| width | 彈出框寬度 | String | false | - |
| spin | 是否顯示加載動畫 | Boolean | false | true |
| title | 彈出框標題 | String | false | - |
| handleIcon | 操作按鈕的圖標 ,設置為false將不顯示,設置為true為默認的預覽圖標,類型為file時默認為false,image類型默認為true | Boolean | false | - |
| allowRemove | 是否可刪除,設置為false是不顯示刪除按鈕 | Boolean | false | true |
##### 事件擴展 event:
| 事件名稱 | 說明 |
| :--- | :--- |
| change | value改變時觸發 |
| open | 打開彈出層回調 |
| ok | 點擊確定時的回調 |
| handle | 點擊操作按鈕事件,默認為圖片預覽 |
| remove | 點擊刪除按鈕事件,返回false將不刪除 |
| cancel | 彈出框關閉是觸發 |
---
