ColorPicker 颜色选择器

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

基础用法

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

With default value

With no default value

export function ColorPickerBasic() {  const [color1, setColor1] = useState<string | null>("#409EFF");  const [color2, setColor2] = useState<string | null>(null);  return (    <>      <div style={blockStyle}>        <span style={labelStyle}>With default value</span>        <ElColorPicker value={color1} onChange={setColor1} />      </div>      <div style={blockStyle}>        <span style={labelStyle}>With no default value</span>        <ElColorPicker value={color2} onChange={setColor2} />      </div>    </>  );}

选择透明度

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

预定义颜色

ColorPicker 支持预定义颜色

export function ColorPickerPredefinedColor() {  const [color, setColor] = useState<string | null>("rgba(255, 69, 0, 0.68)");  return (    <ElColorPicker      value={color}      showAlpha      predefine={PREDEFINE_COLORS}      onChange={setColor}    />  );}

不同尺寸

export function ColorPickerSizes() {  const [color, setColor] = useState<string | null>("#409EFF");  return (    <div style={sizeRowStyle}>      <ElColorPicker        value={color}        size="large"        onChange={setColor}        style={{ marginRight: 16 }}      />      <ElColorPicker        value={color}        onChange={setColor}        style={{ marginRight: 16 }}      />      <ElColorPicker value={color} size="small" onChange={setColor} />    </div>  );}

ColorPicker API

Attributes

属性名	说明	类型	默认值
value	绑定值，对应官方 model-value	`string`	—
disabled	是否禁用	`boolean`	false
clearable	是否显示清空按钮	`boolean`	true
size	尺寸	`enum`	—
showAlpha	是否显示透明度滑块	`boolean`	false
colorFormat	绑定值的颜色格式	`enum`	showAlpha 为 false 时 'hex'，为 true 时 'rgb'
popperClass	下拉面板自定义类名	`string`	''
popperStyle	下拉面板自定义样式	`object`	—
predefine	预定义颜色	`array`	—
validateEvent	是否触发表单校验	`boolean`	true
tabindex	触发器的 tabindex	`string` / `number`	0
ariaLabel	颜色选择器的 aria-label	`string`	—
emptyValues	组件的空值配置	`array`	—
valueOnClear	清空后的返回值	`string` / `number` / `boolean` / `Function`	—
id	组件 id	`string`	—
teleported	面板是否挂载到 body	`boolean`	true
persistent	面板不活跃时是否保留 DOM	`boolean`	true
appendTo	面板挂载的目标选择器或元素	`string` / `HTMLElement`	—

Events

事件名	说明	参数
onChange	确认选择时触发	`Function`
onActiveChange	当前活跃颜色变化时触发	`Function`
onFocus	组件获得焦点时触发	`Function`
onBlur	组件失去焦点时触发	`Function`
onClear	点击清空按钮时触发	`Function`

Exposes

名称	说明	类型
color	当前颜色对象	`object`
show	手动打开颜色选择器	`Function`
hide	手动关闭颜色选择器	`Function`
focus	聚焦触发器	`Function`
blur	触发器失焦	`Function`