ColorPicker 是一个用于选择颜色的输入组件。
import ColorPicker from 'primevue/colorpicker';
ColorPicker 使用 v-model 属性进行双向值绑定。
<ColorPicker v-model="color" />
ColorPicker 与 PrimeVue Forms 库无缝集成。
<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="提交" />
</Form>
ColorPicker 默认以弹出窗口显示，添加 inline 属性可以自定义此行为。
<ColorPicker v-model="color" inline />
值绑定中使用的默认颜色格式是 hex，使用 format 属性还可以设置为 rgb 和 hsb。
<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 和 hex 格式的无障碍文本框来选择颜色。
| 按键 | 功能 |
|---|---|
| tab | 将焦点移动到颜色选择器按钮。 |
| space | 打开弹出窗口并将焦点移动到颜色滑块。 |
| Key | Function |
|---|---|
| enter | 选择颜色并关闭弹出窗口。 |
| space | Selects the color and closes the popup. |
| escape | 关闭弹出窗口，将焦点移动到输入框。 |
| Key | Function |
|---|---|
| arrow keys | 改变颜色。 |
| Key | Function |
|---|---|
| up arrowdown arrow | 改变色调。 |