Color Picker 颜色选择器

基于 BrConfigProvider 实现全局主题配置，支持多格式、透明度调节的企业级颜色选择器，可无缝集成 BrFormItem。

基础使用

提供基础的颜色选择能力。

Example

预设颜色

支持提供常用颜色预设，方便快速选择。

Example

格式与透明度

支持透明度调节，并能在 hex、rgba、hsla 等多种格式间切换。

Example

内联模式

除了默认的弹出框模式，也支持直接内联显示拾色器面板。

Example

表单集成

无缝集成 BrFormItem，支持颜色值绑定与校验状态联动。

Example

主题定制

结合 BrConfigProvider，您可以轻松实现全局和局部的主题样式定制。

Example

API

Props

属性名	类型	默认值	说明
modelValue	string	undefined	绑定的颜色值
defaultValue	string	undefined	默认颜色值
mode	'popover' | 'inline'	'popover'	显示模式
format	'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv'	'hex'	颜色格式
showAlpha	boolean	false	是否显示透明度调节滑块
presets	string[]	undefined	预设颜色数组
presetCols	number	8	预设颜色面板的列数
presetGap	number | string	8	预设颜色面板的间距
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
validationState	'success' | 'warning' | 'error' | 'default'	'default'	校验状态（结合表单自动同步）
clearable	boolean	false	是否显示清空按钮
placeholder	string	'Select color'	占位文本

Emits

事件名	参数	说明
update:modelValue	(value: string | undefined)	绑定值更新时触发
change	(value: string | undefined)	颜色发生变化时触发
clear	()	点击清空按钮时触发