ColorPicker 颜色选择器

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

TIP

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

基础用法

选择透明度

预定义颜色

不同尺寸

API

Attributes

属性名	说明	类型	默认值
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 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`

源代码

组件 • 文档

贡献者

Checkbox 多选框

Date Picker 日期选择器