# 通用颜色选择器组件ColorSelect

组件来源:图形系统 - 一般组件

## 1.功能说明

该组件用于选择颜色，并通过接口中的onSelectedChange方法对外传递颜色值

## 2.组件依赖

- antd

- react

- 通用组件drag-modal

- 通用组件color-palette

- 工具类utils/color-palette

## 3.组件接口

```tsx
interface IProps {
    visible: boolean;                         //组件是否可见
    onSelectChanged?: (color:string)=>void;   //选择颜色时的回调函数
    onClose?: ()=>void;                       //关闭组件时的回调函数
}
```

## 4.案例

采用ColorSelect改变函数组件X中某一div背景颜色的案例

1)导入组件

```tsx
import ColorSelect from './common/color-select/color-select';
```

2)在函数组件X中用useState设置控制颜色与组件是否可见的变量

```tsx
const [colorSelectOpen, setColorSelectOpen] = useState<boolean>(false);
const [color, setColor] = useState<string>("#ffffff");
useEffect(() => {
}, [color])
```

3)编写需要改变背景颜色的div

```tsx
<div style={{backgroundColor:color, width:"40%"}} onClick={()=>{setColorSelectOpen(true)}}>点击打开颜色选择器</div>
```

4)在函数组件X中添加ColorSelect组件

```tsx
<ColorSelect
visible={colorSelectOpen}
onSelectChanged={(color)=>{setColor(color);setColorSelectOpen(false)}}
onClose={() => {setColorSelectOpen(false)}}
/>
```

## 5.备注

color-palette也可单独提取出来使用，但推荐使用color-select,接口如下:

```tsx
interface IProps {
    onComplete?: (color:string) => void;
    onCancel?: () => void;
    defaultColor?: string;
}
```