2021-10-22 19:32:39 +08:00
|
|
|
---
|
2021-10-25 15:21:08 +08:00
|
|
|
title: ColorPicker
|
2021-10-22 19:32:39 +08:00
|
|
|
lang: en-US
|
|
|
|
|
---
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
# ColorPicker
|
|
|
|
|
|
|
|
|
|
ColorPicker is a color selector supporting multiple color formats.
|
|
|
|
|
|
|
|
|
|
## Basic usage
|
|
|
|
|
|
|
|
|
|
:::demo ColorPicker requires a string typed variable to be bound to v-model.
|
|
|
|
|
|
|
|
|
|
color-picker/basic
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## Alpha
|
|
|
|
|
|
|
|
|
|
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
|
|
|
|
|
|
|
|
|
|
color-picker/alpha
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## Predefined colors
|
|
|
|
|
|
|
|
|
|
:::demo ColorPicker supports predefined color options
|
|
|
|
|
|
|
|
|
|
color-picker/predefined-color
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## Sizes
|
|
|
|
|
|
|
|
|
|
:::demo
|
|
|
|
|
|
|
|
|
|
color-picker/sizes
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## Attributes
|
|
|
|
|
|
2022-04-22 22:38:11 +08:00
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|
|
|
| --------------------- | -------------------------------------------- | ------- | ---------------------- | ------------------------------------------------------------- |
|
|
|
|
|
| model-value / v-model | binding value | string | — | — |
|
|
|
|
|
| disabled | whether to disable the ColorPicker | boolean | — | false |
|
|
|
|
|
| size | size of ColorPicker | string | large / default /small | — |
|
|
|
|
|
| show-alpha | whether to display the alpha slider | boolean | — | false |
|
|
|
|
|
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
|
|
|
|
|
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
|
|
|
|
|
| predefine | predefined color options | array | — | — |
|
2022-07-02 21:01:05 +08:00
|
|
|
| validate-event | whether to trigger form validation | boolean | - | true |
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
|
|
|
## Events
|
|
|
|
|
|
|
|
|
|
| Event Name | Description | Parameters |
|
|
|
|
|
| ------------- | ---------------------------------------------- | ------------------ |
|
|
|
|
|
| change | triggers when input value changes | color value |
|
|
|
|
|
| active-change | triggers when the current active color changes | active color value |
|
