Used for color selection, supporting multiple formats.

Attributes

Parameter	Description	Type	Optional Values	Default
value / v-model	Bound value	string	—	—
disabled	Whether disabled	boolean	—	false
size	Size	string	—	medium / small / mini
show-alpha	Whether opacity selection is supported	boolean	—	false
color-format	Format of the color written into v-model	string	hsl / hsv / hex / rgb	hex (show-alpha is false) / rgb (show-alpha is true)
popper-class	Class name of the ColorPicker dropdown	string	—	—
predefine	Predefined colors	array	—	—
hide-color-panel	Hide the color panel	boolean	—	—
hide-footer	Hide the footer action area	boolean	—	—

Events

Event Name	Description	Callback Parameters
change	Triggered when the bound value changes	Current value
active-change	Triggered when the currently displayed color in the panel changes	Currently displayed color value

Slot

name	Description
footer	Content in the button action area

Basic Usage

<div class="block">
  <span class="demonstration">With Default Value</span>
  <fx-color-picker v-model="color1" >
  </fx-color-picker>
</div>
<div class="block">
  <span class="demonstration">Without Default Value</span>
  <fx-color-picker v-model="color2"></fx-color-picker>
</div>

Opacity Selection

<fx-color-picker v-model="color" show-alpha ></fx-color-picker>

Predefined Colors

<fx-color-picker
  v-model="color"
  show-alpha
  hideFooter
  hide-color-panel
  :predefine="predefineColors">
</fx-color-picker>

Different Sizes

<fx-color-picker v-model="color"></fx-color-picker>
<fx-color-picker v-model="color" size="medium"></fx-color-picker>
<fx-color-picker v-model="color" size="small"></fx-color-picker>
<fx-color-picker v-model="color" size="mini"></fx-color-picker>