SepColorPicker 颜色选择器组件 v1.0.0
颜色拾取 · HSV 饱和度面板 · 色相/透明度调节 · hex/rgb/hsl 格式互转 · 透明度 showAlpha · 预设色板 presets · showText 显示颜色值 · allowClear 可清空 · size 尺寸 · disabled 禁用
1. 基础用法
HTML 声明式标签
JS API 初始化
当前值：
#3B82F6
2. 颜色格式 format（hex / rgb / hsl）
HTML 声明式标签
JS API 初始化
3. 透明度 showAlpha
HTML 声明式标签
JS API 初始化
当前值：
rgba(59, 130, 246, 0.5)
4. 预设色板 presets（常用主题色 + 常用色）
HTML 声明式标签（自定义预设）
HTML 声明式标签（不传 presets 时显示默认常用色）
JS API 初始化
5. showText 显示颜色值 & allowClear 可清空
HTML 声明式标签
JS API 初始化
6. size 尺寸（small / middle / large）
HTML 声明式标签
JS API 初始化
7. disabled 禁用
HTML 声明式标签
JS API 初始化
8. defaultValue 非受控模式
HTML 声明式标签（defaultValue 仅初始化，后续由组件内部维护）
JS API 初始化（defaultValue + onChange 监听变化）
当前值：
#3B82F6
9. onOpenChange 面板开关回调
JS API 初始化
面板状态：
closed
10. getColor 颜色对象（hex / rgb / hsl / hsv）
JS API 初始化
颜色对象：
—
11. API 交互示例（setValue / show / hide / toggle / getColor）
JS API 初始化
当前值：
#3B82F6
12. 面板布局与尺寸 layout / panelSize
支持水平 / 垂直两种布局：水平布局下 SV 选色区与预设色板左右排列；垂直布局下二者上下排列。另支持 default / compact 两种面板尺寸。
水平布局 · 默认尺寸
垂直布局 · 默认尺寸
水平布局 · 紧凑尺寸
垂直布局 · 紧凑尺寸
API 参考
配置项 (Options)
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | '' | 当前选中颜色（受控），支持 hex/rgb/hsl/rgba |
| defaultValue | string | '#000000' | 初始颜色（非受控） |
| format | 'hex' | 'rgb' | 'hsl' | 'hex' | 颜色值输出格式 |
| showAlpha | boolean | false | 是否显示透明度滑块 |
| presets | string[] | 默认常用色 | 预设色板，不传时显示默认常用主题色 + 灰度 |
| showText | boolean | false | 是否显示颜色值文本 |
| allowClear | boolean | false | 是否显示清空按钮 |
| disabled | boolean | false | 是否禁用 |
| size | 'small' | 'middle' | 'large' | 'middle' | 触发器尺寸 |
| layout | 'horizontal' | 'vertical' | 'horizontal' | 面板布局：horizontal=选色区与预设色板左右排列；vertical=二者上下排列 |
| panelSize | 'default' | 'compact' | 'default' | 面板尺寸：默认 / 紧凑 |
| presetsStorageKey | string | '' | 自定义常用色持久化到 localStorage 的 key，设置后启用"我的常用色" |
| placement | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | 浮层弹出方向 |
| onChange | (value) => void | — | 颜色变化回调 |
| onOpenChange | (open) => void | — | 面板开关回调 |
实例方法 (Methods)
| 方法 | 说明 |
|---|---|
| getValue() | 获取当前颜色值字符串 |
| setValue(value) | 设置颜色值，支持 hex/rgb/hsl |
| getColor() | 获取完整颜色对象 { hex, rgb, hsl, hsv, a } |
| getFormat() / setFormat(f) | 获取/设置输出格式 |
| isShowAlpha() / setShowAlpha(b) | 获取/设置透明度开关 |
| isDisabled() / setDisabled(b) | 获取/设置禁用状态 |
| getSize() / setSize(s) | 获取/设置尺寸 |
| show() / hide() / toggle() | 控制面板显示 |
| isOpen() | 面板是否打开 |
| subscribe(fn) | 订阅状态变化 |
| getState() | 获取当前状态快照 |
| destroy() | 销毁组件，释放资源 |