ColorPicker 颜色选择器

用于颜色选择的交互组件

参数

Props

名称	类型	默认值	描述
modelValue	Color | null	null	选中的颜色值
showAlpha	boolean	true	是否显示透明度选择
showText	boolean	true	是否显示下方文本框
format	ColorFormat	'hex'	指定输出颜色格式
inline	boolean	false	是否内联模式
size	ComponentSize	'medium'	颜色选择器大小

Events

名称	描述	参数
update:modelValue	颜色值更新事件	(value: string | null) => void
change	颜色值变化事件	(value: string | null) => void

示例

基础用法

基本的颜色选择功能

大小

提供三种不同大小的选择器

透明度选择

控制是否显示透明度选择

内联模式

直接内联显示完整的颜色选择面板

TypeScript

// 颜色格式类型
export type ColorFormat = "hex" | "rgb" | "hsl";

// 组件尺寸
export type ComponentSize = "small" | "medium" | "large";

// 颜色类型
export type Color = string | RGBColor | HSLColor;

// RGB颜色对象
export interface RGBColor {
  r: number; // 红色 0-255
  g: number; // 绿色 0-255
  b: number; // 蓝色 0-255
  a?: number; // 透明度 0-1
}

// HSL颜色对象
export interface HSLColor {
  h: number; // 色相 0-360
  s: number; // 饱和度 0-100
  l: number; // 亮度 0-100
  a?: number; // 透明度 0-1
}