ColorPicker 颜色选择器

AuColorPicker 使用系统取色面板；AuColorSwatch 用于从固定的预设颜色中选择。

基础用法

系统取色

预设颜色

当前颜色：#3478f6

<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" />
      <AuColorPicker v-model="color" />
      <AuColorPicker v-model="color" size="large" />
      <AuColorPicker model-value="#a8b0bd" disabled />
    </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"
        @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>

ColorPicker API

Attributes

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

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
title	自定义原生提示文字	string	''

Events

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