ColorPicker Component
ColorPicker is a color selector supporting multiple color formats.
When to Use
- Theme customization
- Color selection
- Design tools
- Style configuration
Basic Usage
<template>
<el-color-picker v-model="color" />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#409EFF')
</script>
Alpha Channel
<template>
<el-color-picker v-model="color" show-alpha />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('rgba(19, 206, 102, 0.8)')
</script>
Predefined Colors
<template>
<el-color-picker
v-model="color"
:predefine="predefineColors"
/>
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#409EFF')
const predefineColors = [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585'
]
</script>
Sizes
<template>
<el-color-picker v-model="color" size="large" />
<el-color-picker v-model="color" />
<el-color-picker v-model="color" size="small" />
</template>
Color Formats
<template>
<el-color-picker v-model="color" color-format="rgb" />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('rgb(64, 158, 255)')
</script>
API Reference
Attributes
| Name |
Description |
Type |
Default |
| model-value / v-model |
Binding value |
string |
— |
| disabled |
Disabled |
boolean |
false |
| clearable |
Show clear button |
boolean |
true |
| size |
Size |
'large' | 'default' | 'small' |
— |
| show-alpha |
Show alpha slider |
boolean |
false |
| color-format |
Color format |
'rgb' | 'prgb' | 'hex' | 'hex3' | 'hex4' | 'hex6' | 'hex8' | 'name' | 'hsl' | 'hsv' |
'hex' or 'rgb' |
| predefine |
Predefined colors |
string[] |
— |
| validate-event |
Trigger form validation |
boolean |
true |
Events
| Name |
Description |
Type |
| change |
Value changes |
(value: string) => void |
| active-change |
Active color changes |
(value: string) => void |
| focus |
Component focuses |
(event: FocusEvent) => void |
| blur |
Component blurs |
(event: FocusEvent) => void |
| clear |
Clear button clicked |
() => void |
Exposes
| Name |
Description |
Type |
| color |
Current color object |
Color |
| show |
Show picker |
() => void |
| hide |
Hide picker |
() => void |
| focus |
Focus picker |
() => void |
| blur |
Blur picker |
() => void |
Best Practices
- Use
show-alpha for transparent colors
- Use
predefine for brand colors
- Use
color-format for specific format needs
jiaiyan