## Input 輸入框
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/7ehKp/edit)
#### 舉例:
```js
{
type:"input",
title:"商品名稱",
field:"goods_name",
value:"iphone 7",
props: {
"type": "text",
"placeholder": "請輸入商品名稱",
},
validate:[
{ required: true, message: '請輸入goods_name', trigger: 'blur' },
],
}
```
#### maker快速生成:
```js
$formCreate.maker.input('商品名稱','goods_name').props({
placeholder:'請輸入商品名稱'
}).validate([
{ required: true, message: '請輸入商品名稱', trigger: 'blur' }
])
```
#### json 生成規則
```json
{
type:"input",//必填!
//label名稱
title:"商品名稱",//必填!
//字段名稱
field:"goods_name",//必填!
//input值
value:"iphone 7",
//設置布局規則
col:{
span:12,
labelWidth:150
},
props: {
//輸入框類型，可選值為 text、password、textarea、url、email、date
"type": "text", //必填!
//是否顯示清空按鈕
"clearable":false,
//設置輸入框為禁用狀態
"disabled": false,
//設置輸入框為只讀
"readonly": false,
//文本域默認行數，僅在 textarea 類型下有效
"rows": 4,
//自適應內容高度，僅在 textarea 類型下有效，可傳入對象，如 { minRows: 2, maxRows: 6 }
"autosize": false,
//將用戶的輸入轉換為 Number 類型
"number": false,
//自動獲取焦點
"autofocus": false,
//原生的自動完成功能，可選值為 off 和 on
"autocomplete": "off",
//占位文本
"placeholder": "請輸入商品名稱",
//輸入框尺寸，可選值為large、small、default或者不設置
"size": "default",
//原生的 spellcheck 屬性
"spellcheck": false,
},
validate:[
{ required: true, message: '請輸入goods_name', trigger: 'blur' },
],
}
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值 | String,Number | false | - |
| props | 元素配置 | Object | true | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 輸入框類型，可選值為 text、password、textarea、url、email、date | String | true | 'input' |
| clearable | 是否顯示清空按鈕 | Boolean | true | false |
| disabled | 設置輸入框為禁用狀態 | Boolean | true | false |
| readonly | 設置輸入框為只讀 | Boolean | false | false |
| rows | 文本域默認行數，僅在 textarea 類型下有效 | Number,Boolean | false | 4 |
| autosize | 自適應內容高度，僅在 textarea 類型下有效，可傳入對象，如 { minRows: 2, maxRows: 6 } | Boolean | false | false |
| number | 將用戶的輸入轉換為 Number 類型 | Boolean | false | false |
| autofocus | 自動獲取焦點 | Boolean | false | false |
| autocomplete | 原生的自動完成功能，可選值為 off 和 on | String | false | 'off' |
| placeholder | 占位文本 | String,Boolean | false | - |
| size | 輸入框尺寸，可選值為large、small、default或者不設置 | Boolean | false | 'default' |
| spellcheck | 原生的 spellcheck 屬性 | Boolean | false | false |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| enter | 按下回車鍵時觸發 | Function | false | - |
| click | 設置 icon 屬性后，點擊圖標時觸發 | Function | false | - |
| change | 數據改變時觸發 | Function | false | - |
| focus | 輸入框聚焦時觸發 | Function | false | - |
| blur | 輸入框失去焦點時觸發 | Function | false | - |
| keyup | 原生的 keyup 事件 | Function | false | - |
| keydown | 原生的 keydown 事件 | Function | false | - |
| keypress | 原生的 keypress 事件 | Function | false | - |
---
