ColorPickerPanel Component
ColorPickerPanel is the core component of ColorPicker for building custom color selection interfaces.
When to Use
- Custom color picker UI
- Embedded color selection
- Advanced color tools
- Custom dropdown implementations
Basic Usage
<template>
<el-color-picker-panel v-model="color" />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#409EFF')
</script>
Alpha Channel
<template>
<el-color-picker-panel v-model="color" show-alpha />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('rgba(64, 158, 255, 0.8)')
</script>
Predefined Colors
<template>
<el-color-picker-panel
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>
Without Border
<template>
<el-color-picker-panel v-model="color" :border="false" />
</template>
Disabled
<template>
<el-color-picker-panel v-model="color" disabled />
</template>
API Reference
Attributes
| Name |
Description |
Type |
Default |
| model-value / v-model |
Binding value |
string |
— |
| border |
Show border |
boolean |
true |
| disabled |
Disabled |
boolean |
false |
| 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 |
Slots
| Name |
Description |
| footer |
Content after the panel |
Exposes
| Name |
Description |
Type |
| color |
Current color object |
Color |
| inputRef |
Input ref |
InputInstance |
| update |
Update sub components |
() => void |
Best Practices
- Use for custom color picker implementations
- Combine with Popover for dropdown behavior
- Use
predefine for brand colors
jiaiyan