# color-picker (w-color-picker)

- **Import**: `WColorPicker` from `win-design-next`
- **Tag**: `<w-color-picker>`
- **说明**: ColorPicker 颜色选择器
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/color-picker.md`

## API

## API

### Attributes

| 属性名                      | 说明                                    | 类型                                                                                                             | 默认值 |
| --------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------ |
| model-value / v-model       | 选中项绑定值                            | ^[string]                                                                                                        | —      |
| disabled                    | 是否禁用                                | ^[boolean]                                                                                                       | false  |
| size                        | 尺寸                                    | ^[enum]`'large' \| 'default' \| 'mini' \| 'small'`                                                               | —      |
| show-alpha                  | 是否支持透明度选择                      | ^[boolean]                                                                                                       | false  |
| color-format                | 写入 v-model 的颜色的格式               | ^[enum]`'hsl' \| 'hsv' \| 'hex' \| 'rgb' \| 'hex' (when show-alpha is false) \| 'rgb' (when show-alpha is true)` | —      |
| popper-class                | ColorPicker 下拉框的类名                | ^[string]                                                                                                        | —      |
| predefine                   | 预定义颜色                              | ^[object]`string[]`                                                                                              | —      |
| validate-event              | 输入时是否触发表单的校验                | ^[boolean]                                                                                                       | true   |
| tabindex                    | ColorPicker 的 tabindex                 | ^[string] / ^[number]                                                                                            | 0      |
| aria-label ^(a11y)          | ColorPicker 的 aria-label               | ^[string]                                                                                                        | —      |
| id                          | ColorPicker 的 id                       | ^[string]                                                                                                        | —      |
| teleported                  | 是否将 popover 的下拉列表渲染至 body 下 | ^[boolean]                                                                                                       | true   |
| label ^(a11y) ^(deprecated) | ColorPicker 的 aria-label               | ^[string]                                                                                                        | —      |

### Events

| 事件名        | 说明                               | 类型                                     |
| ------------- | ---------------------------------- | ---------------------------------------- |
| change        | 当绑定值变化时触发                 | ^[Function]`(value: string) => void`     |
| active-change | 面板中当前显示的颜色发生改变时触发 | ^[Function]`(value: string) => void`     |
| focus         | 当获得焦点时触发                   | ^[Function]`(event: FocusEvent) => void` |
| blur          | 当失去焦点时触发                   | ^[Function]`(event: FocusEvent) => void` |

### Exposes

| 名称  | 说明               | 类型                    |
| ----- | ------------------ | ----------------------- |
| color | 当前色彩对象       | ^[object]`Color`        |
| show  | 手动显示颜色选择器 | ^[Function]`() => void` |
| hide  | 手动隐藏颜色选择器 | ^[Function]`() => void` |
| focus | 使 picker 获得焦点 | ^[Function]`() => void` |
| blur  | 使 picker 失去焦点 | ^[Function]`() => void` |
