ColorPicker 颜色选择器

颜色选择器用于选择颜色，支持多种颜色格式（HEX、RGB、RGBA），提供可视化的颜色选择面板。

基础用法

最简单的颜色选择器用法。

显示透明度

通过 show-alpha 属性可以显示透明度选择器。

预设颜色

通过 predefine 属性可以设置预设颜色列表。

颜色格式

通过 color-format 属性可以设置输出颜色格式，支持 hex、rgb、rgba。

可清空

通过 clearable 属性可以清空颜色值。

不同尺寸

通过 size 属性可以设置不同尺寸的颜色选择器。

禁用状态

通过 disabled 属性可以禁用颜色选择器。

API

Props

属性名	说明	类型	可选值	默认值
modelValue	绑定值，支持 HEX 字符串或 ColorObject 对象	string | ColorObject	—	#409eff
size	组件尺寸	string	large / default / small	default
disabled	是否禁用	boolean	—	false
clearable	是否可清空	boolean	—	false
showAlpha	是否显示透明度选择器	boolean	—	false
colorFormat	颜色格式（输出格式）	string	hex / rgb / rgba	hex
predefine	预设颜色列表	string[]	—	[]
disabledAlpha	是否禁用透明度	boolean	—	false

ColorObject

interface ColorObject {
  r: number  // 红色值 (0-255)
  g: number  // 绿色值 (0-255)
  b: number  // 蓝色值 (0-255)
  a?: number // 透明度 (0-1)，可选
}

Events

事件名	说明	回调参数
update:modelValue	颜色值变化时触发（支持 v-model）	(value: string | ColorObject) => void
change	颜色值变化时触发	(value: string | ColorObject) => void
activeChange	颜色值实时变化时触发（拖拽时）	(value: string | ColorObject) => void
clear	清空颜色时触发	() => void

使用说明

1. 颜色格式：

   • hex: 输出格式为 #RRGGBB（如 #409eff）
   • rgb: 输出格式为 rgb(r, g, b)（如 rgb(64, 158, 255)）
   • rgba: 输出格式为 rgba(r, g, b, a) 或 ColorObject（如 rgba(64, 158, 255, 1)）

2. 预设颜色：

   • 通过 predefine 属性传入颜色数组，会在颜色选择面板底部显示预设颜色
   • 点击预设颜色可以快速选择

3. 透明度：

   • 当 show-alpha 为 true 且 disabled-alpha 为 false 时，会显示透明度滑块
   • 透明度值范围是 0-1

4. 颜色选择：

   • 在饱和度/亮度面板中点击或拖拽可以选择颜色
   • 在色相滑块中点击或拖拽可以调整色相
   • 在透明度滑块中点击或拖拽可以调整透明度
   • 也可以直接在输入框中输入 HEX 或 RGB 值