ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
基础用法
选择透明度
预定义颜色
不同尺寸
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string | — |
| disabled | 是否禁用 | boolean | false |
| size | 尺寸 | enum | — |
| show-alpha | 是否支持透明度选择 | boolean | false |
| color-format | 写入 v-model 的颜色的格式 | enum | — |
| popper-class | ColorPicker 下拉框的类名 | string | — |
| predefine | 预定义颜色 | object | — |
| tabindex | ColorPicker 的 tabindex | string / number | 0 |
| id | ColorPicker 的 id | string | — |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发 | Function |
| active-change | 面板中当前显示的颜色发生改变时触发 | Function |
方法
通过 ref 可以获取到 ColorPicker 实例并调用实例方法，详见组件实例方法。
| 名称 | 说明 | 类型 |
|---|---|---|
| color | 当前色彩对象 | object |
| show | 手动显示颜色选择器 | Function |
| hide | 手动隐藏颜色选择器 | Function |
类型定义
组件导出以下类型定义：
ts
import type { ColorPickerProps, ColorPickerInstance } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-color-picker-width | 32px | 颜色选择器的宽度 |
| --r-color-picker-height | 32px | 颜色选择器的高度 |
| --r-color-picker-alpha-bg-a | #ccc | - |
| --r-color-picker-alpha-bg-b | transparent | - |