## 颜色拾取器组件

* 支持两种显示模式（有操作栏和无操作栏）
* 支持两种选色方式（纯色和渐变色）
* 支持hex和rgba两种色值
* 支持渐变色角度调整
* 支持透明度设置
* 支持拖动和点击的方式改变色值

----


### 参数说明

#### 常规配置项

| 属性 | 是否必填 | 类型 | 默认值 | 描述 |
| ---- | ---- | --- | --- | --- |
| theme | 否 | string | "dark" | 主题 |
| value | 是 | string | "" | 颜色值 |
| placement | 否 | string | "bottom" | popover显示位置 |
| destroyTooltipOnHide | 否 | boolean | true | 是否关闭时销毁弹窗内容 |
| type | 否 | string | undefined | 颜色填充方式 |
| gradientConfig | 否 | Object | {} | 渐变色相关配置项 |
| footer | 否 | Object | {} | 底部操作配置项 |
| handleOk | 否 | function | null | 确认颜色信息（关闭弹窗或弹窗失去焦点时触发） |
| handleCancel | 否 | function | null | 取消回调函数 |


#### gradientConfig配置项（目前仅支持线性渐变）

| 属性 | 是否必填 | 类型 | 默认值 | 描述 |
| ---- | ---- | --- | --- | --- |
| current | 否 | number | 0 | 渐变激活项 |
| colorGroups | 否 | Array | ['#5B8FF9', '#5B8FF9'] | 颜色值（色组） |
| angle | 否 | number | 0 | 渐变角度（-360～360） |


#### footer配置项（暂时仅支持按钮文字设置）

| 属性 | 是否必填 | 类型 | 默认值 | 描述 |
| ---- | ---- | --- | --- | --- |
| okText | 否 | string | '确认' | 确认按钮文字 |
| cancelText | 否 | string | '取消' | 取消按钮文字 |


#### handleOk params 回调函数返回结果说明

| 属性 | 是否必填 | 类型 | 默认值 | 描述 |
| ---- | ---- | --- | --- | --- |
| color | 是 | string/Array | '' / [] | 颜色值（hex或rgba） |
| angle | 否 | number | 0 | 渐变角度 |
| fillType | 否 | string | '' | 颜色填充类型 |
| current | 否 | number | 0 | 渐变设置激活项（0：开始，1：结束） |



----



## 使用示例

### 通用颜色拾取器

```jsx
import React, {useState} from 'react';
import ColorBtn from "./index";

// 颜色设置组件
const ColorSetting = () => {
    const [color, setColor] = useState('#fff');
    const changeColor = params => {
        // console.log('颜色信息', params)
        setColor(params.color)
    }
    return <ColorBtn
       value={color}
       handleOk={changeColor}
   />
}

export default ColorSetting;
```


----



### 纯色颜色拾取器

```jsx
import React, {useState} from 'react';
import ColorBtn from "./index";

// 纯色颜色设置组件
const PureColorSetting = () => {
    const [pureColor, setPureColor] = useState('#fff');
    const changeColor = params => {
        // console.log('颜色信息', params)
        setPureColor(params.color)
    }
    return <ColorBtn
       type='pure'
       value={pureColor}
       footer={{okText: '确认', cancelText: '取消'}}
       handleOk={changeColor}
       handleCancel={_ => console.log('取消')}
   />
}

export default PureColorSetting;
```

----


### 渐变颜色拾取器
```jsx
import React, {useState} from 'react';
import ColorBtn from "./index";

// 渐变颜色设置组件
const GradientColorSetting = () => {
    const [gradientColor, setGradientColor] = useState([]);
    const changeColor = params => {
        // console.log('颜色信息', params)
        setGradientColor(params.color)
    }
    return <ColorBtn
       type='gradient'
       gradientConfig={{
            current: 0,
            colorGroups: gradientColor,
            angle: 0,
       }}
       footer={{okText: '确认', cancelText: '取消'}}
       handleOk={changeColor}
       handleCancel={_ => console.log('取消')}
   />
}

export default GradientColorSetting;
```