Color 颜色拾取器 (Component)

2025-08-25 09:47:47首发，5天前更新

Color颜色拾取器组件是基于Color Library的模块，用来对任意节点应用颜色选取功能。

Color 颜色拾取器 (Library)5天前更新 Color 颜色拾取器 (Component)5天前更新 Color颜色主题3周前更新

前言

原生的type=color组件是无法获取透明度通道的，所以UI框架基本上都会封装一个拾色器组件。本框架的拾色器组件具备原生拾色器组件的功能，同时具备更多特性：

支持hsv和hsl两种色彩空间
支持显示色彩空间的坐标名称
支持从色彩空间中随机获取颜色
支持以滑块修改色彩空间的色相
支持以滑块修改输出值的透明度
支持使用Number组件精确微调色值和透明度值
支持hwb颜色模式
支持多种面板布局结构
支持自定义色值并长期缓存
支持显示本框架的常用色

简单使用

使用ax-color标签即可表示一个拾色器组件。

本组件的宿主节点是一个ax-input组件，具备四种功能：

显示当前色值对应的色块，空值则显示透明
显示当前色值，可为空
复制当前色值
清空当前色值

输出
HTML

```
                
                
            
```

设置初始值

默认初始值为空，可通过属性value设置初始值，支持以下颜色格式

rgb或rgba，例如rgb(0,0,0)或rgba(0,0,0,1)
hsl或hsla，例如hsl(0,0%,0%)或hsla(0,0%,0%,1)
hex或hexa，例如#000000或#000000ff
hwb或hwba，例如hwb(0,0%,0%)或hwba(0,0%,0%,1)

由于hwb和hwba格式是CSS的新特性，浏览器支持有限，请谨慎使用。

输出
HTML

```
                
                
            
```

可将value值填在标签内。

输出
HTML

#e055ed
```
                
                
            
```

自动校正

默认是拾色器面板单向像宿主节点输出色值，如果需要面板每次打开的时候都自动检测宿主节点的色值，并自动更新面板上的色值，可设置属性detectable。

输出
HTML
JS

```
                
                
            
```

                
                let demo = document.querySelector("#demo0002"),
                    btn = document.querySelector("#demo0002btn");
                btn.onclick = ()=>{
                    demo.setAttribute("value", "#ff0000");
                }

使用name

如果需要作为提交表单的一部分，那么可设置name属性，像其他表单域节点那样。

输出
HTML

```
                
                
            
```

自动填充值

默认需要通过面板的“确认”按钮才可以对宿主节点进行赋值，如果需要在面板的每一次操作都能自动赋值，则可设置属性manual=false。

自动填值模式下，会在初始化时将面板的默认色值（纯红色）进行填充，所以有必要通过参数value设置一个初始值。

输出
HTML

```
                
                
            
```

输出值格式

默认填充的值格式为hsla格式，可通过属性format指定。支持rgb、rgba、hsl、hsla、hex、hexa、hwb和hwba格式。

输出
HTML

```
                
                
            
```

多种面板

支持多种面板类型，可通过属性layout指定，支持以下几个值：

picker，仅显示颜色拾取器，默认
palette，仅显示预设面板
full，同时显示picker和palette面板

输出
HTML

```
                
                
            
```

Attributes属性

属性名	语义类型	可选值	默认值	说明
disabled	boolean	-	-	是否禁用
readonly	boolean	-	-	是否只读
manual	boolean	-	true	是否手动填值
full	boolean	-	false	是否铺满父容器
detectable	boolean	-	false	是否自动校正面板颜色
size	string	'sm'/'md'/'lg'	'md'	尺寸类型
label	string	-	-	标题文本
placeholder	string	-	''	占位文本
layout	string	'picker'/'palette'/'full'	'picker'	面板布局类型
value	string	-	''	初始值
format	string	'hsl'/'hsla'/'rgb'/'rgba'/'hex'/'hexa'/'hwb'/'hwba'	'hsla'	填值格式
color	object	-	{}	Color实例的参数

Methods方法

有组件通用的内置方法：

set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
reset：重置组件属性，无参数
clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

connected：组件连接成功，无参数
disconnected：组件断开连接，无参数
adopted：组件被转移，无参数
set：设置了属性，支持一个参数即设置的值
cleared：清除了属性，无参数
reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});