ColorPicker 颜色选择器

AuColorPicker 使用系统取色面板；AuColorSwatch 用于从固定的预设颜色中选择。两者提供一致的紧凑尺寸和焦点反馈。

基础用法

系统取色与预设颜色

系统取色器和预设色块可以绑定同一个颜色值，并提供清晰的选中状态。

系统取色

预设颜色

当前颜色：#3478f6

vue

<template>
  <div class="color-picker-demo">
    <span class="color-picker-demo__label">系统取色</span>
    <div class="color-picker-demo__row">
      <AuColorPicker v-model="color" size="small" aria-label="小号颜色选择器" />
      <AuColorPicker v-model="color" aria-label="默认颜色选择器" />
      <AuColorPicker v-model="color" size="large" aria-label="大号颜色选择器" />
      <AuColorPicker model-value="#a8b0bd" disabled aria-label="禁用颜色选择器" />
    </div>
    <span class="color-picker-demo__label">预设颜色</span>
    <div class="color-picker-demo__row">
      <AuColorSwatch
        v-for="preset in presets"
        :key="preset.color"
        :color="preset.color"
        :selected="color === preset.color"
        :aria-label="preset.label"
        @select="color = $event"
      />
    </div>
    <p class="color-picker-demo__result">当前颜色：{{ color }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuColorPicker, AuColorSwatch } from 'aurora-plus';
const color = ref('#3478f6');
const presets = [
  { color: '#3478f6', label: '蓝色' },
  { color: '#2f9e72', label: '绿色' },
  { color: '#d98a24', label: '橙色' },
  { color: '#df4c62', label: '红色' },
  { color: '#8b5cf6', label: '紫色' },
  { color: '#ffffff', label: '白色' },
  { color: '#172033', label: '黑色' },
];
</script>
<style scoped>
.color-picker-demo {
  display: grid;
  gap: 14px;
}
.color-picker-demo__row {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 14px;
  flex-wrap: wrap;
}
.color-picker-demo__label {
  margin-bottom: -8px;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.color-picker-demo__result {
  margin: 0;
  color: var(--au-color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--au-font-size-small);
}
</style>

使用建议

• modelValue 使用完整的六位十六进制颜色，例如 #3478f6。
• 每个颜色控件都应提供描述用途的 aria-label，不要只写“选择颜色”。
• 禁用状态用于展示不可修改的颜色；需要展示颜色值时在控件旁提供文本。

固定色板使用 AuColorSwatch，不要用空内容按钮或在业务页面重新绘制颜色项。

ColorPicker API

Attributes

属性	说明	类型	默认值
modelValue	当前十六进制颜色	string	#000000
fallback	当前值不是六位十六进制颜色时的显示值	string	#ffffff
size	尺寸	small / default / large	default
disabled	是否禁用	boolean	false
ariaLabel	无障碍名称	string	选择颜色

Events

事件名	说明	参数
update:modelValue	颜色变化	(value)
input	系统取色过程中的颜色变化	(value, event)
change	确认颜色后触发	(value, event)
focus	获得焦点	(event)
blur	失去焦点	(event)

Exposes

方法或属性	说明
focus(options?)	聚焦颜色选择控件
inputRef	内部 color input 元素引用

ColorSwatch API

Attributes

属性	说明	类型	默认值
color	色块显示及 select 回传的 CSS 颜色	string	#000000
selected	是否显示选中环和勾选标识	boolean	false
size	尺寸	small / default / large	default
disabled	是否禁用	boolean	false
ariaLabel	无障碍名称，同时作为默认原生提示	string	选择颜色
title	自定义原生提示文字	string	''

Events

事件名	说明	参数
select	选择色块	(color)
click	点击色块	(event)