ColorPickerPanel 颜色选择器面板 beta

ColorPickerPanel 是 ColorPicker 的核心组件，可以单独使用，将颜色选择器直接嵌入到页面中。

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

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

基础用法

边框

默认情况下，边框是默认的，如果你不想要边框请设置 border 为 false。

选择透明度

使用 show-alpha 开启透明度选择。

预定义颜色

通过 predefine 设置预定义颜色。

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string	—
border	是否显示边框	boolean	true
show-alpha	是否支持透明度选择	boolean	false
color-format	写入 v-model 的颜色格式	'hex' | 'rgb' | 'hsl' | 'hsv'	—
disabled	是否禁用	boolean	false
predefine	预定义颜色	string[]	—
validate-event	输入时是否触发表单的校验	boolean	true
hue-slider-class	色相滑块的自定义类名	string / array / object	—
hue-slider-style	色相滑块的自定义样式	string / array / object	—

Events

事件名	说明	类型
update:modelValue	当绑定值变化时触发	Function

Exposes

名称	说明	类型
color	当前色彩对象	object
inputRef	输入框的 ref	object