ColorPicker 颜色选择器
用于选择和设置颜色。支持多种色彩模式（HEX, RGB, HSL），具备透明度控制及预定义色彩等高级特性。
展示模式
ColorPicker 提供全功能的交互演示，您可以实时切换透明度支持和不同尺寸。
透明度调节:
尺寸选择:
当前值：#6366f1
全功能展示
基础用法
颜色选择器的基础功能，支持 HEX 格式的双向绑定。
基础用法
透明度调节
开启 show-alpha 属性后，组件将支持 alpha 通道的调节，并自动切换为 RGBA 格式。
支持透明度
预定义色彩
可以在面板底部显示一系列预设的快速颜色选项。
预定义颜色
禁用状态
设置 disabled 属性后颜色选择器将无法进行交互。
禁用状态
自创高级特性
1. 智能对比度预览 (Intelligent Contrast)
组件面板会自动根据 WCAG 标准 计算选中颜色与背景的相对亮度，并在右上角实时给出辅助功能建议，确保设计方案满足视觉无障碍要求。
2. 跨平台吸色器 (EyeDropper)
基于现代浏览器原生的 EyeDropper API，支持从屏幕任何位置获取颜色（不仅限于浏览器窗口内），为专业设计场景提供生产力级支持。
3. 双向交互输入框
底部的值显示区域现已升级为感应式输入框。您可以直接粘贴设计师提供的 HEX 或 RGB 代码，组件会瞬间解析定位。
在 Nuxt 中使用
YhColorPicker 已完美适配 Nuxt 3/4。在 Nuxt 架构下，所有相关 API（包括 EyeDropper 检测）均经过了 Client-Only 环境优化，确保 SSR 流程零报警。
Nuxt 中使用
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string | — |
| show-alpha | 是否支持透明度 | boolean | false |
| predefine | 预定义颜色列表 | string[] | [] |
| size | 尺寸 | 'large' | 'default' | 'small' | 'default' |
| disabled | 是否禁用 | boolean | false |
| popper-class | 面板自定义类名 | string | — |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 确定选择颜色时触发 | (val: string) |
| active-change | 面板内颜色实时改变时触发 | (val: string) |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-color-picker-width | 组件基础宽度 | 60px |
--yh-color-picker-panel-width | 展开面板宽度 | 280px |
--yh-color-picker-border-radius | 圆角弧度 | 12px |