Skip to content

ColorPickerPanel 颜色选择面板

面板式颜色选择器。基于 colord 构建,提供 HSV 调色区域、色相/透明度滑块、Hex 输入和预定义色板。始终可见(非弹出),适合嵌入表单或作为独立面板使用。

基础用法

vue
<TColorPickerPanel v-model="color" />

输出格式

通过 color-format 控制输出类型。

vue
<TColorPickerPanel v-model="color" color-format="rgb" />
<TColorPickerPanel v-model="color" color-format="hsl" />

透明度支持

vue
<TColorPickerPanel v-model="color" show-alpha />

预定义色板

vue
<TColorPickerPanel
  v-model="color"
  :predefine="['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f']"
/>

API

Props

参数类型默认值说明
v-modelstring'#066fd1'颜色值
color-format'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl''#hex'输出格式
show-alphabooleanfalse显示透明度滑块
predefinestring[]预设色板
disabledbooleanfalse禁用

Emits

事件说明回调参数
update:modelValuev-model 更新(value: string)
change颜色变化(value: string)