## ColorPicker 顏色選擇框
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
#### [在線預覽](https://jsrun.net/tehKp/edit)
#### 舉例:
```js
{
type: "ColorPicker",
field: "color",
title: "顏色",
value: '#ff7271',
}
```
#### maker快速生成:
```js
$formCreate.maker.color('顏色','color','#ff7271').props({
"format":"hex"
}).props({
"hue": true
})
```
#### json 生成規則
```json
{
type: "ColorPicker",//必填!
field: "color",//必填!
title: "顏色",//必填!
//input值
value: '#ff7271',
props: {
//是否支持透明度選擇
"alpha": false,
//是否支持色彩選擇
"hue": true,
//是否顯示推薦的顏色預設
"recommend": false,
//尺寸，可選值為large、small、default或者不設置
"size":"default",
//自定義顏色預設
"colors":[],
//顏色的格式，可選值為 hsl、hsv、hex、rgb,開啟 alpha 時為 rgb，其它為 hex
"format":"hex",
},
validate:[],
}
```
#### 參數說明
##### 基本規則 rule:
| **字段名** | **說明** | **字段類型** | **是否必填** | **默認值** |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值 | String | false | - |
| props | 元素配置 | Object | false | - |
| event | 元素事件 | Object | false | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| alpha | 是否支持透明度選擇 | Boolean | false | false |
| hue | 是否支持色彩選擇 | Boolean | false | true |
| recommend | 是否顯示推薦的顏色預設 | Boolean | false | false |
| size | 尺寸，可選值為large、small、default或者不設置 | String | false | - |
| colors | 自定義顏色預設 | Array | false | - |
| format | 顏色的格式，可選值為 hsl、hsv、hex、rgb,開啟 alpha 時為 rgb，其它為 hex | String | false | 'hex' |
##### 事件擴展 event:
| 事件名稱 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| change | 當綁定值變化時觸發，返回當前值 | Function | false | - |
| active-change | 聚焦時觸發 面板中當前顯示的顏色發生改變時觸發 | Function | false | - |
---
