ColorPicker 颜色选择器

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

import { createApp } from 'vue'
import { ElColorPicker } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElColorPicker)

基础用法

选择透明度

预定义颜色

不同尺寸

禁用状态

通过 disabled 属性禁用颜色选择器。

输出不同的格式

通过 color-format 指定 v-model 的输出格式，可选值为 hex、rgb、hsl、hsv。

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string	—
disabled	是否禁用	boolean	false
clearable	文本框可输入	boolean	true
size	尺寸	enum	—
show-alpha	是否支持透明度选择	boolean	false
color-format	写入 v-model 的颜色的格式	enum	enum
popper-class	ColorPicker 下拉框的类名	string / object	''
popper-style	ColorPicker 下拉面板的自定义样式	string / object	—
predefine	预定义颜色	array	—
validate-event	输入时是否触发表单的校验	boolean	true
tabindex	ColorPicker 的 tabindex	string / number	0
aria-label a11y	ColorPicker 的 aria-label	string	—
empty-values	组件的空值配置， 参考config-provider	array	—
value-on-clear	清空选项的值， 参考config-provider	string / number / boolean / Function	—
id	ColorPicker 的 id	string	—
teleported	是否将 popover 的下拉列表渲染至 body 下	boolean	true
label a11y deprecated	ColorPicker 的 aria-label	string	—
persistent	当颜色选择器未激活且 persistent 为 false 时，颜色面板将被销毁。	boolean	true
append-to	挂载到哪个 DOM 元素	CSSSelector / HTMLElement	-

Events

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

Exposes

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