ColorPicker 颜色选择器

使用

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

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法

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

选择透明度

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

预定义颜色

ColorPicker 支持预定义颜色

不同尺寸

API

Props

参数名	描述	类型	默认值
model-value / v-model	选中项绑定值	string	-
disabled	是否禁用	boolean	false
size	尺寸	enum	-
show-alpha	是否支持透明度选择	boolean	false
color-format	写入 v-model 的颜色的格式	enum	-
popper-class	ColorPicker 下拉框的类名	string	-
predefine	预定义颜色	object	-
validate-event	输入时是否触发表单的校验	boolean	true
tabindex	ColorPicker 的 tabindex	string / number	0
label a11y	ColorPicker 的 aria-label	string	-
id	ColorPicker 的 id	string	-

Events

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

Methods

方法名	描述	类型
color	当前色彩对象	object
show	手动显示颜色选择器	Function
hide	手动隐藏颜色选择器	Function
focus	使 picker 获得焦点	Function
blur	使 picker 失去焦点	Function