颜色选择器 ColorPicker

选择一个你喜欢的颜色。

考虑到与已选颜色搭配效果不佳，ColorPicker 没有设置 focus 和 hover 的边框效果。

基础使用

modelValue 是颜色字符串值，color 是颜色对象值。这两个值传入至少一个进入受控模式。它们都不传入或者为 undefined 则为非受控模式。此时可以传入 defaultValue 和 defaultColor 属性作为默认值。

rgb(151, 0, 255, 0.75)

rgb(151, 0, 255, 0.75)

rgb(151, 0, 255, 0.75)
{ "format": "rgb", "color": { "r": 151, "g": 0, "b": 255, "a": 191 } }

隐藏源代码

颜色格式

组件目前支持 RGB、HEX、HSV、HSL、HWB 这几种颜色格式。

RGB

rgb(0, 255, 68, 0.75)

hsl(136, 100%, 50%, 0.75)

隐藏源代码

显示透明度

组件支持通过 includeAlpha 设置颜色是否包含透明度

Include Alpha

rgb(61, 190, 255)

hwb(200, 23.92%, 0%, 0.75)

隐藏源代码

预设颜色

preset 属性提供预设颜色选项。

rgb(255, 163, 0, 1)

隐藏源代码

尺寸、形状

rgb(153, 31, 80, 1)

rgb(191, 38, 99, 1)

rgb(230, 46, 119, 1)

隐藏源代码

图标展示

隐藏源代码

更多配置

ColorPicker 还拥有 Input 组件的一些特性。

Disabled, Readonly

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

Composite

Color:

rgb(255, 255, 255, 1)

Label:

Status

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

Expose

rgb(255, 255, 255, 1)

隐藏源代码

API

ColorPickerProps

属性	类型	可选	默认值	描述	版本
modelValue	string | null	是		颜色选择器的字符串值（受控模式），支持 v-model。	0.2.0
defaultValue	string | null	是		颜色选择器字符串值的默认值（非受控模式）。	0.2.0
color	ColorValue | null	是		颜色选择器的对象值（受控模式），支持 v-model。	0.2.0
defaultColor	ColorValue | null	是		颜色选择器字符串值的对象值（非受控模式）。	0.2.0
mode	'hex' | 'rgb' | 'hsv' | 'hsl' | 'hwb'	是	'rgb'	颜色选择器的颜色格式。	0.2.0
includeAlpha	boolean	是	true	是否包含 alpha 透明度。	0.2.0
preset	string[]	是		预设颜色。	0.2.0
disabled	boolean	是	false	是否禁用。	0.2.0
readonly	boolean	是	false	是否只读。	0.2.0
size	'medium' | 'large' | 'small'	是	'medium'	自动填充输入框尺寸。	0.2.0
shape	'medium' | 'large' | 'small'	是	'rect'	自动填充输入框形状。	0.2.0
showIcon	boolean	是	true	是否展示图标。	0.2.0
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.2.0
status	'success' | 'warning' | 'error' | 'normal'	是	'normal'	表单验证状态。	0.2.0
autofocus	boolean	是	false	原生 <input> 的 autofocus 属性。	0.2.0
dropdownDestroyOnHide	boolean	是	false	下拉面板是否会在隐藏时销毁。	0.2.0
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.2.0
dropdownProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		下拉选择面板的属性。	0.2.0

ColorPickerEvents

事件	参数	描述	版本
update:modelValue	value: string	更新 modelValue 的回调。	0.2.0
update:color	value: ColorValue	更新 color 的回调。	0.2.0
change	colorString: string, colorWithModel: ColorWithModel, event?: Event	颜色变化时的回调。	0.2.0
blur	event: FocusEvent	自动填充输入框失焦时的回调。	0.2.0
focus	event: FocusEvent	自动填充输入框聚焦时的回调。	0.2.0
dropdownOpen		下拉面板展示的回调。	0.2.0
dropdownClose		下拉面板关闭的回调。	0.2.0

ColorPickerExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		聚焦当前控件。	0.2.0
blur	() => void	否		取消聚焦当前控件。	0.2.0

]]]

ColorValue, ColorWithModel

export type ColorValue = {
	format: 'rgb' | 'hsv' | 'hsl' | 'hwb'
	color: RgbaColor | HslaColor | HsvaColor | HwbaColor
}

export type ColorWithModel = {
	rgb: RgbaColor
	hsl: HslaColor
	hwb: HwbaColor
	hsv: HsvaColor
}

export type RgbaColor = { r: number; g: number; b: number; a: number }
export type HsvaColor = { h: number; s: number; v: number; a: number }
export type HslaColor = { h: number; s: number; l: number; a: number }
export type HwbaColor = { h: number; w: number; b: number; a: number }

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`