颜色选择器

颜色选择器是一个用于选择颜色的输入组件。

导入 #


import ColorPicker from 'primevue/colorpicker';

基本 #

颜色选择器与 v-model 属性一起使用，用于双向值绑定。


<ColorPicker v-model="color" />

表单 #

颜色选择器与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col items-center gap-2">
        <ColorPicker name="color" />
        <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

内联 #

颜色选择器默认显示为弹出窗口，添加 inline 属性可自定义此行为。


<ColorPicker v-model="color" inline />

格式 #

值绑定中使用的默认颜色格式是 hex，其他可能的值可以是 rgb 和 hsb，使用 format 属性。

HEX

6466f1

RGB

{"r":100,"g":102,"b":241}

HSB

{"h":239,"s":59,"b":95}


<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />

禁用 #

当存在 disabled 时，元素无法编辑和聚焦。


<ColorPicker v-model="color" disabled />

无障碍 #

屏幕阅读器

规范尚未涵盖颜色选择器，并且在不同浏览器中使用语义原生颜色选择器并不一致，因此当前组件与屏幕阅读器不兼容。在即将到来的版本中，将在滑块部分下方引入文本字段，以便能够使用 hsl、rgba 和十六进制格式的可访问文本框来选择颜色。

弹出颜色选择器的关闭状态键盘支持

按键	功能
tab	将焦点移动到颜色选择器按钮。
空格键	打开弹出窗口并将焦点移动到颜色滑块。

弹出窗口键盘支持

按键	功能
回车键	选择颜色并关闭弹出窗口。
空格键	选择颜色并关闭弹出窗口。
Esc	关闭弹出窗口，并将焦点移动到输入框。

颜色选择器滑块

按键	功能
方向键	更改颜色。

色调滑块

按键	功能
上箭头下箭头	更改色调。