ColorPicker

ColorPicker is a color selector supporting multiple color formats.

Basic usage

ColorPicker requires a string typed variable to be bound to v-model.

With default value

With no default value

ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.

ColorPicker supports predefined color options

Name	Description	Type	Default
model-value / v-model	binding value	`string`	—
disabled	whether to disable the ColorPicker	`boolean`	false
clearable 2.13.1	whether to show clear button	`boolean`	true
size	size of ColorPicker	`enum`	—
show-alpha	whether to display the alpha slider	`boolean`	false
color-format	color format of v-model	`enum`	`enum`
popper-class	custom class name for ColorPicker's dropdown	`string` / `object`	''
popper-style 2.11.4	custom style for ColorPicker's dropdown	`string` / `object`	—
predefine	predefined color options	`array`	—
validate-event	whether to trigger form validation	`boolean`	true
tabindex	ColorPicker tabindex	`string` / `number`	0
aria-label a11y 2.7.2	ColorPicker aria-label	`string`	—
empty-values 2.10.3	empty values of component, see config-provider	`array`	—
value-on-clear 2.10.3	clear return value, see config-provider	`string` / `number` / `boolean` / `Function`	—
id	ColorPicker id	`string`	—
teleported 2.7.2	whether color-picker popper is teleported to the body	`boolean`	true
label a11y deprecated	ColorPicker aria-label	`string`	—
persistent 2.10.5	when color-picker inactive and persistent is false, the color panel will be destroyed	`boolean`	true
append-to 2.10.5	which element the color-picker panel appends to	`CSSSelector` / `HTMLElement`	-

Name	Description	Type
change	triggers when input value changes	`Function`
active-change	triggers when the current active color changes	`Function`
focus 2.4.0	triggers when Component focuses	`Function`
blur 2.4.0	triggers when Component blurs	`Function`
clear 2.13.1	triggers when the clear button is clicked	`Function`