Element Plus ColorPicker 颜色选择器完整指南多格式色值、Alpha 通道与预定义色板【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plusColorPicker 是 Element PlusVue.js 3 UI Library中用于颜色选择的表单组件支持 hex、rgb、hsl、hsv 等十余种颜色格式并可结合 Alpha 通道、预定义色板和表单校验工作。读完本文你将掌握 ColorPicker 的完整 API 用法、show-alpha/color-format/predefine等核心配置项的实战组合并理解其底层基于ctrl/tinycolor的颜色解析与格式化原理。基本用法ColorPicker 需要一个字符串类型的变量绑定到v-model上绑定的字符串即当前选中的颜色值。template div classdemo-color-block span classdemonstrationWith default value/span el-color-picker v-modelcolor1 / /div div classdemo-color-block span classdemonstrationWith no default value/span el-color-picker v-modelcolor2 / /div /template script langts setup import { ref } from vue const color1 ref(#409EFF) const color2 ref() /script完整示例可查看 docs/examples/color-picker/basic.vue。当v-model未赋值时触发按钮内会显示一个空色块占位图标源码中由close图标渲染见 color-picker.vue赋值后显示当前颜色及下拉箭头图标。点击触发按钮打开下拉面板面板内包含SV 平面取色板饱和度/明度色相Hue滑块当前颜色预览与可输入的 Hex / RGB 输入框底部清除 / 确定按钮从源码结构看这些 UI 分别由sv-panel.vue、hue-slider.vue、alpha-slider.vue、predefine.vue实现均位于 packages/components/color-picker-panel/src/components/。透明度Alpha通道ColorPicker 支持 Alpha 通道选择。只需添加show-alpha属性即可激活透明度滑块同时触发按钮色块会呈现半透明效果色块样式类名带is-alpha标记见 color-picker.vue。template el-color-picker v-modelcolor show-alpha / /template script langts setup import { ref } from vue const color ref(rgba(19, 206, 102, 0.8)) /script示例见 docs/examples/color-picker/alpha.vue。关键行为结合源码开启show-alpha后ColorPicker 的默认输出格式会从hex自动切换为rgb。这一逻辑位于 Color 类的doOnChange方法let _format format || (enableAlpha ? rgb : hex) if (format hex enableAlpha) { _format hex8 }即未指定color-format时enableAlpha决定默认格式若显式指定color-formathex且开启 Alpha则格式会被自动升级为带透明度的hex8如#c7158577保证透明度信息不丢失。预定义颜色ColorPicker 支持通过predefine属性提供一组预定义颜色用户可在面板顶部的预定义色块中快速选取。template el-color-picker v-modelcolor show-alpha :predefinepredefineColors / /template script langts setup import { ref } from vue const color ref(rgba(255, 69, 0, 0.68)) const predefineColors ref([ #ff4500, #ff8c00, #ffd700, #90ee90, #00ced1, #1e90ff, #c71585, rgba(255, 69, 0, 0.68), rgb(255, 120, 0), hsv(51, 100, 98), hsva(120, 40, 94, 0.5), hsl(181, 100%, 37%), hsla(209, 100%, 56%, 0.73), #c7158577, ]) /script示例见 docs/examples/color-picker/predefined-color.vue。可见predefine是string[]类型支持混合传入 hex、rgb、hsv、hsl 等不同格式的颜色字符串——组件内部统一通过 TinyColor 解析。当前值与预定义色相同时对应色块会高亮显示已选中状态选中态切换逻辑有对应测试覆盖见 color-picker.test.tsx。尺寸SizesColorPicker 支持large、default、small三种尺寸通过size属性设置也可跟随外层el-form的size上下文自动继承源码中通过useFormSize()获取尺寸见 color-picker.vue。template div classdemo-color-sizes el-color-picker v-modelcolor sizelarge / el-color-picker v-modelcolor / el-color-picker v-modelcolor sizesmall / /div /template script langts setup import { ref } from vue const color ref(#409EFF) /script示例见 docs/examples/color-picker/sizes.vue。APIAttributes属性以下属性定义均可在 color-picker.ts 中核对。名称说明类型默认值model-value / v-model绑定值string—disabled是否禁用 ColorPickerbooleanfalseclearable ^(2.13.1)是否显示清除按钮booleantruesize尺寸large \| default \| small—show-alpha是否显示透明度滑块booleanfalsecolor-formatv-model 的颜色格式rgb \| prgb \| hex \| hex3 \| hex4 \| hex6 \| hex8 \| name \| hsl \| hsvhex未开启 show-alpha/rgb开启 show-alphapopper-class下拉面板自定义类名string / objectpopper-style ^(2.11.4)下拉面板自定义样式string / object—predefine预定义颜色选项string[]—validate-event是否触发表单校验booleantruetabindexColorPicker 的 tabindexstring / number0aria-label ^(a11y) ^(2.7.2)ColorPicker 的 aria-labelstring—empty-values ^(2.10.3)组件的空值集合参见 config-provider 的 empty-values 配置array—value-on-clear ^(2.10.3)清除时的返回值参见 config-provider 的 empty-values 配置string / number / boolean / Function—idColorPicker 的 idstring—teleported ^(2.7.2)下拉面板是否 teleport 到 bodybooleantruelabel ^(a11y) ^(deprecated)ColorPicker 的 aria-label已废弃改用 aria-labelstring—persistent ^(2.10.5)面板非激活时是否保留为false时销毁面板 DOMbooleantrueappend-to ^(2.10.5)面板挂载到的目标元素CSSSelector / HTMLElement-重点属性解析结合源码color-format直接透传给底层的 Color 类作为输出格式。Color 内部维护 HSVA 四通道状态fromString时通过 TinyColor 解析任意合法颜色字符串并归一化为 HSVA见 color.ts输出时再按目标格式序列化doOnChange。因此你可以随时切换输出格式而无需关心用户当前面板操作的是哪个色彩空间。validate-event默认true。确认选择confirmValue或失焦afterBlur时会调用formItem.validate(change/blur)见 color-picker.vue。若 ColorPicker 置于el-form-item内且配置了校验规则选中颜色即可触发校验。value-on-clear / empty-values点击清除按钮时v-model 会被置为valueOnClear的值默认undefined/空而不是简单置空字符串方便与表单空值体系统一。clearable控制面板底部是否渲染清除按钮。测试用例验证了clearable{false}时不显示清除按钮见 color-picker.test.tsx。teleported / append-to / persistent这三个属性均继承自 Tooltip 的弹层配置useTooltipContentProps。teleported决定面板是否挂到 body默认true可避免被父级overflow: hidden裁剪append-to可指定挂载目标persistentfalse时面板在关闭状态下会被销毁适合追求极致内存占用的场景。Events事件事件发射定义见 color-picker.ts。名称说明类型change输入值改变时触发点击确定或清除时(value: string) voidactive-change当前激活颜色改变时触发面板中拖动取色时实时触发(value: string) voidfocus ^(2.4.0)组件获得焦点时触发(event: FocusEvent) voidblur ^(2.4.0)组件失去焦点时触发(event: FocusEvent) voidclear ^(2.13.1)点击清除按钮时触发() voidchange 与 active-change 的区别active-change在用户在面板中拖动 SV 板、滑动色相/透明度滑块时实时触发由watch currentColor驱动见 color-picker.vue而change仅在点击确定按钮confirmValue或清除按钮时与update:modelValue一同触发此时 v-model 才真正提交。Exposes暴露的方法名称说明类型color当前颜色对象Colorshow ^(2.3.3)手动打开 ColorPicker() voidhide ^(2.3.3)手动关闭 ColorPicker() voidfocus ^(2.3.13)聚焦取色器触发元素() voidblur ^(2.3.13)使取色器触发元素失焦() void通过模板 ref 即可调用script langts setup import { ref } from vue import type { ColorPickerInstance } from element-plus const colorPickerRef refColorPickerInstance() function openPicker() { colorPickerRef.value?.show() } /script template el-color-picker refcolorPickerRef v-modelcolor / el-button clickopenPicker打开取色器/el-button /templatecolor对象说明它对外暴露Color类实例定义于 color.ts内部维护_hue、_saturation、_value、_alpha四个通道并提供toRgb()、fromString()、set()、get()、compare()等方法可满足编程式读写颜色的需求。无障碍与键盘操作组件根元素具备rolebutton支持Enter、Space打开面板Esc关闭并重置颜色见 color-picker.vue未处于表单上下文时可通过aria-label提供无障碍标签处于el-form-item内时自动关联表单项的 labelaria-labelledby见 color-picker.vue面板本身以roledialog渲染在 Tooltip 中配合loop键盘循环焦点管理。底层原理颜色解析与格式化ColorPicker 的颜色核心是封装自ctrl/tinycolor的Color类其关键流程为解析fromString(value)将任意格式颜色字符串交给 TinyColor 校验并转换为 HSVA 归一化状态存储序列化doOnChange()依据format与enableAlpha决定输出格式默认 hex开启 Alpha 则 rgb/hex8将 HSVA 状态重新toString(format)生成最终 v-model 值比较compare()基于 HSVA 构造 TinyColor 比较是否等价用于确认选择后判断是否需要重置面板状态。这一设计使面板操作与输出格式解耦无论面板中以何种色彩空间交互输出格式始终由color-format统一控制。在表单中使用ColorPicker 遵循 Element Plus 表单体系外层使用el-formel-form-item包裹后可通过rules配置必填等校验规则选择或清除颜色时自动触发校验受validate-event控制。同时尺寸、禁用状态也会自动跟随表单上下文useFormSize()/useFormDisabled()。el-form :modelform :rulesrules el-form-item label主题色 propthemeColor el-color-picker v-modelform.themeColor / /el-form-item /el-form版本演进提示2.3.3新增show/hide暴露方法2.3.13新增focus/blur暴露方法2.4.0新增focus/blur事件2.7.2新增aria-label与teleported2.10.3新增empty-values与value-on-clear2.10.5新增persistent与append-to2.11.4新增popper-style2.13.1新增clearable属性与clear事件。以上能力均以当前仓库代码含 color-picker.ts、color-picker.vue 及配套测试 color-picker.test.tsx为准使用前请确认项目安装的 Element Plus 版本满足对应要求。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考