ColorPicker 颜色选择器

用于颜色选择,支持多种格式。

基础用法

使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。

With default value
With no default value

选择透明度

ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha属性即可控制是否支持透明度的选择。 要启用 Alpha 选择,只需添加 show-alpha 属性。

预定义颜色

ColorPicker 支持预定义颜色

不同尺寸

API

Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值string
disabled是否禁用booleanfalse
size尺寸enum
show-alpha是否支持透明度选择booleanfalse
color-format写入 v-model 的颜色的格式enum
popper-classColorPicker 下拉框的类名string
predefine预定义颜色object
validate-event输入时是否触发表单的校验booleantrue
tabindexColorPicker 的 tabindexstring / number0
aria-label a11y 2.7.2ColorPicker 的 aria-labelstring
idColorPicker 的 idstring
teleported 2.7.2是否将 popover 的下拉列表渲染至 body 下booleantrue
label a11y deprecatedColorPicker 的 aria-labelstring

Events

事件名说明类型
change当绑定值变化时触发Function
active-change面板中当前显示的颜色发生改变时触发Function
focus 2.4.0当获得焦点时触发Function
blur 2.4.0当失去焦点时触发Function

Exposes

名称说明类型
color当前色彩对象object
show 2.3.3手动显示颜色选择器Function
hide 2.3.3手动隐藏颜色选择器Function
focus 2.3.13使 picker 获得焦点Function
blur 2.3.13使 picker 失去焦点Function

源代码

组件样式文档

贡献者