ColorCheck 颜色选择器

颜色选择组件。展示为可选的色块，内部使用 colord 进行颜色格式转换和亮度自动检测。

单选

<TColorCheck color="#066fd1" v-model="selected" />
<TColorCheck color="#d63939" v-model="selected" />

多选

multiple 切换为多选模式，v-model 绑定数组。基于 Vue 原生 v-model + <input type="checkbox">，数组推入/剔除由框架自动完成。

<TColorCheck color="#066fd1" multiple v-model="selected" />

圆形样式

<TColorCheck color="#2fb344" rounded v-model="selected" />

输出格式（color-format）

color-format 控制输出格式。下拉选择格式后，色块选中值按指定格式输出。

<TColorCheck color="#066fd1" color-format="rgb" v-model="color" />
<TColorCheck color="#d63939" color-format="hsl" v-model="color" />

数组生成（colors）

通过 colors 传入颜色数组，自动渲染色块列表，无需手写多个标签。单项 ColorCheckOption 的 value 不传时默认取 color 值。

<TColorCheck v-model="selected" :colors="[
  { color: '#066fd1' },
  { color: '#d63939' },
  { color: '#2fb344' },
]" />

禁用状态

<TColorCheck color="#066fd1" v-model="color" disabled />

API

Props

参数	类型	默认值	说明
v-model	any | any[]	—	绑定值（单选为任意类型，多选为数组）
color	string	'#066fd1'	色块颜色。支持 #hex / hex / rgb() / hsl() / rgba()
colors	ColorCheckOption[]	—	选项数组，自动渲染多个色块
color-format	'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl'	—	输出格式（不传则输出原始值）
multiple	boolean	false	多选模式
disabled	boolean	false	禁用
name	string	—	原生 name 属性（Radio 分组用，不传自动生成）