ColorPicker
ColorPicker is a color selector supporting multiple color formats.
TIP
This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).
Basic usage
Alpha
Predefined colors
Sizes
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | string | — |
| disabled | whether to disable the ColorPicker | boolean | false |
| size | size of ColorPicker | enum | — |
| show-alpha | whether to display the alpha slider | boolean | false |
| color-format | color format of v-model | enum | — |
| popper-class | custom class name for ColorPicker's dropdown | string | — |
| predefine | predefined color options | object | — |
| validate-event | whether to trigger form validation | boolean | true |
| tabindex | ColorPicker tabindex | string / number | 0 |
| label a11y | ColorPicker aria-label | string | — |
| id | ColorPicker id | string | — |
Events
| 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 |
Exposes
| Name | Description | Type |
|---|---|---|
| color | current color object | object |
| show 2.3.3 | manually show ColorPicker | Function |
| hide 2.3.3 | manually hide ColorPicker | Function |
| focus 2.3.13 | focus the picker element | Function |
| blur 2.3.13 | blur the picker element | Function |