ColorPicker 颜色选择器
用于选择颜色，支持预设色板、自由取色和渐变色三种模式，可切换 HEX / RGB / HSL 格式与透明度。
基础用法
默认 type='color'，通过 v-model 绑定颜色值（hex 字符串）：
#3b82f6
当前值：#3b82f6
预设色板
设置 type='preset'，仅显示预设色块供快速选择：
#ef4444
当前值：#ef4444
渐变选择
设置 type='gradient'，选择起始色、结束色和方向，v-model 绑定为 CSS 渐变字符串：
渐变色
当前值：linear-gradient(to right, #3b82f6, #10b981)
格式切换
设置 format='rgb' 或 format='hsl'，输出值将使用对应格式；面板内也可切换查看：
#f59e0b
rgb(139, 92, 246)
hsl(217, 91%, 60%)
HEX: #f59e0b
RGB: rgb(139, 92, 246)
HSL: hsl(217, 91%, 60%)
透明度
设置 show-alpha 后可调整透明度，HEX 输出为 8 位格式，RGB/HSL 输出为 rgba/hsla 格式：
#3b82f680
rgba(59, 130, 246, 0.5)
HEX8: #3b82f680
RGBA: rgba(59, 130, 246, 0.5)
自定义预设
通过 presets 属性传入自定义颜色数组：
#22c55e
当前值：#22c55e
不同尺寸
设置 size 属性使用三种预设尺寸：
#ef4444
#3b82f6
#8b5cf6
可清空与禁用
clearable 属性使选择器显示清除按钮，disabled 属性禁用选择器：
#f59e0b×
#10b981
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | '#3b82f6' | 绑定值，gradient 类型为 CSS 渐变字符串 |
type | 'preset' | 'color' | 'gradient' | 'color' | 选择器类型 |
format | 'hex' | 'rgb' | 'hsl' | 'hex' | 输出格式 |
size | 'sm' | 'md' | 'lg' | 'md' | 选择器尺寸 |
disabled | boolean | false | 是否禁用 |
clearable | boolean | false | 是否可清空 |
showAlpha | boolean | false | 是否显示透明度滑块 |
presets | string[] | — | 自定义预设色数组，不传则使用默认 24 色 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (value: string | undefined) => void | 值变化时触发 |
change | (value: string | undefined) => void | 确认选择时触发 |