ColorPicker 颜色选择

颜色选择器。SV 取色区、色相与透明度滑块、预设色板。

基础用法

#9661ff

当前：#9661ff

<script setup>
import { ref } from 'vue'
const color = ref('#9661ff')
</script>

<template>
  <SrColorPicker v-model="color" />
</template>

值格式是十六进制字符串

统一用 #RRGGBB 或 #RRGGBBAA（开透明度时）——不用 rgb() 或颜色名。

理由与 DatePicker 用字符串一样：这个值要存进状态、发给接口、写进 CSS 变量， 十六进制是这三处都直接接受的格式。用对象或 rgb() 字符串的话， 每个使用点都要转换一次。

透明度

show-alpha 开启透明度滑块，值多出两位十六进制（RRGGBBAA）。

#2bb67380

当前：#2bb67380

<SrColorPicker v-model="color" show-alpha />

预设色会保留当前透明度

从预设里挑一个颜色时，透明度不会被重置。

预设决定的只是「色相与明暗」，透明与否是另一回事。 若一并重置，用户在调好透明度后点一下预设就前功尽弃了。

预设色板

#9661ff

<script setup>
const presets = ['#2bb673', '#4c8dff', '#9661ff', '#f5566c']
</script>

<template>
  <SrColorPicker v-model="color" :presets="presets" />
</template>

预设是给常见选择提速的，不是限制——下方的取色区始终可用。

带输入框

show-input 让用户可以直接粘贴一个色值。适合设计师从设计稿里复制颜色的场景。

#f5566c

<SrColorPicker v-model="color" show-input />

尺寸与状态

#9661ff

#9661ff

#9661ff

#9661ff

#ffa940

<SrColorPicker v-model="color" size="sm" />
<SrColorPicker v-model="color" clearable />
<SrColorPicker v-model="color" disabled />

取色区的实现

SV 取色区是一个「白→纯色→黑」的两层渐变叠加：

第一层：从左到右，白 → 透明（露出下层色相）
第二层：从下到上，黑 → 透明

比逐像素绘制的 canvas 简单得多，且随尺寸自适应、不需要重绘。 指针位置用 getBoundingClientRect 换算成百分比，因此缩放页面后依然准确。

Props

名称	类型	默认值	说明
modelValue	string	—	当前色值，#RRGGBB 或 #RRGGBBAA
placeholder	string	—	占位文本
size	'sm' | 'md' | 'lg'	'md'	尺寸
disabled	boolean	false	是否禁用
clearable	boolean	false	是否可清空
invalid	boolean	false	是否处于错误态
showAlpha	boolean	false	是否显示透明度滑块
showInput	boolean	false	是否显示色值输入框
presets	string[]	—	预设色板
placement	'bottom-start' | 'bottom-end'	'bottom-start'	面板对齐方式

事件

事件	参数	说明
update:modelValue	string	颜色变化（拖动过程中持续触发）
change	string	同上（语义化事件）

无障碍

• 触发器带 aria-label，描述为「选择颜色」而非仅显示当前色值
• 色相与透明度滑块是原生 <input type="range">， 方向键可精确调整——这比鼠标拖拽精确得多
• 取色区用方向键微调（每次 1%，按住 Shift 时为大步长）
• 颜色不是唯一的区分手段：状态提示（如错误）不能只靠颜色， 否则色觉障碍用户无法分辨