ColorPicker 颜色选择器

弹出式颜色选择器。点击触发按钮展开完整的调色面板，基于 Floating UI 自适应定位。

基础用法

<TColorPicker v-model="color" />

隐藏色值

通过 show-value 控制右侧颜色值文本的显示与隐藏。

<TColorPicker v-model="color" :show-value="false" />

带标签

<TColorPicker v-model="color" label="主题色" />

输出格式

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

透明度支持

<TColorPicker v-model="color" show-alpha />

预定义色板

<TColorPicker v-model="color" :predefine="['#f00', '#ff0', '#0f0']" />

尺寸

<TColorPicker v-model="color" size="sm" />
<TColorPicker v-model="color" size="md" />
<TColorPicker v-model="color" size="lg" />

禁用状态

<TColorPicker v-model="color" disabled />

API

Props

参数	类型	默认值	说明
v-model	string	'#066fd1'	颜色值
color-format	'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl'	'#hex'	输出格式
show-alpha	boolean	false	显示透明度滑块
show-value	boolean	true	显示右侧颜色值文本
predefine	string[]	—	预设色板
disabled	boolean	false	禁用
label	string	—	标签文字
size	'sm' | 'md'	'md'	触发按钮尺寸

Emits

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