ColorPicker Component

ColorPicker component allows users to select colors through a visual interface, supporting multiple color formats, transparency adjustment, and predefined colors.

Basic Usage

The most basic color picker usage.

Currently selected color value: #409EFF

Show Code

Alpha Selection

Enable transparency selection by setting the show-alpha attribute.

Currently selected color value: rgba(64, 158, 255, 0.68)

Alpha effect preview

Show Code

Predefined Colors

Set predefined colors through the predefine attribute to provide quick selection of commonly used colors.

Currently selected color value: #1e90ff

Predefined color list:

Show Code

Different Sizes

ColorPicker supports different sizes, set through the size attribute, supporting small, default, and large sizes.

Small

Default

Large

Show Code

Different Color Formats

ColorPicker supports different color format outputs, which can be set through the color-format attribute.

HEX Format

#409EFF

RGB Format

rgb(64, 158, 255)

RGBA Format

rgba(64, 158, 255, 0.68)

Show Code

Disabled State

Disable the color picker by setting the disabled attribute.

Disabled State

Current color value: #409EFF

Show Code

Event Handling

ColorPicker provides various events for handling operations during the color selection process.

rgba(64, 158, 255, 0.8)

Event Log:

No events

Show Code

ColorPicker Component API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	string	—	—
disabled	Whether disabled	boolean	—	false
size	Size	string	small / default / large	default
show-alpha	Whether to support alpha selection	boolean	—	false
color-format	Color format written to v-model	string	hsl / hsv / hex / rgb	hex
popper-class	Class name for ColorPicker dropdown	string	—	—
predefine	Predefined colors	string[]	—	—
validate-event	Whether to trigger form validation on input	boolean	—	true
tabindex	ColorPicker tabindex	string / number	—	0
teleported	Whether to render dropdown under body	boolean	—	true

Events

Event Name	Description	Parameters
change	Triggered when binding value changes	(value: string)
active-change	Triggered when currently displayed color changes	(value: string)
focus	Triggered when focused	(event: FocusEvent)
blur	Triggered when blurred	(event: FocusEvent)

Methods

ColorPicker component exposes the following methods, which can be called through template refs.

Method Name	Description	Parameters
handleTriggerClick	Toggle color picker panel display/hide	—

Style Variables

ColorPicker component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Primary theme color
$text-color-default	Default text color
$border-color-default	Default border color
$bg-color-default	Default background color
$color-white	White color
$color-black	Black color
$font-size-default	Default font size
$font-size-small	Small font size
$opacity-disabled	Disabled state opacity