使用场景
通过触发器打开调色弹层，用于主题色与标记色选择。
格式、透明度与预设
showAlpha 开启透明度，colorFormat 决定输出表示，predefine 提供快捷颜色。模型是颜色文本或 null。
格式、透明度与预设
vue
<template>
<div class="example">
<AsamColorPicker
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
@change="event = String($event)"
/>
<output>颜色：{{ color }}；change：{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerBasicExample' });
import { ref } from 'vue';
import { AsamColorPicker } from '@asam-ui/ui';
const color = ref<string | null>('#526d82');
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamColorPicker
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
@change="event = String($event)"
/>
<output>颜色：{{ color }}；change：{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerBasicExample' });
import { ref } from 'vue';
import { AsamColorPicker } from '@asam-ui/ui';
const color = ref('#526d82');
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>实例与禁用状态
show/hide 控制弹层，focus/blur 控制触发器。disabled 阻止编辑，active-change 用于颜色预览，change 用于提交。
实例与禁用状态
vue
<template>
<div class="example">
<AsamColorPicker ref="control" v-model="color" :disabled="disabled" />
<div class="row">
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="control?.show()"> 打开 </AsamButton>
<AsamButton type="default" @click="control?.hide()"> 关闭 </AsamButton>
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
</div>
<output>颜色：{{ color }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerInstanceExample' });
import { ref } from 'vue';
import { AsamColorPicker, AsamButton } from '@asam-ui/ui';
import type { AsamColorPickerExpose } from '@asam-ui/ui';
const control = ref<AsamColorPickerExpose>();
const color = ref<string | null>('#526d82');
const disabled = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamColorPicker ref="control" v-model="color" :disabled="disabled" />
<div class="row">
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="control?.show()"> 打开 </AsamButton>
<AsamButton type="default" @click="control?.hide()"> 关闭 </AsamButton>
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
</div>
<output>颜色：{{ color }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerInstanceExample' });
import { ref } from 'vue';
import { AsamColorPicker, AsamButton } from '@asam-ui/ui';
const control = ref();
const color = ref('#526d82');
const disabled = ref(false);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamColorPicker size="large" model-value="#526d82" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamColorPicker size="big" model-value="#526d82" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamColorPicker size="default" model-value="#526d82" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamColorPicker size="small" model-value="#526d82" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamColorPicker model-value="#526d82" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerSizesExample' });
import { ref } from 'vue';
import { AsamColorPicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamColorPicker size="large" model-value="#526d82" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamColorPicker size="big" model-value="#526d82" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamColorPicker size="default" model-value="#526d82" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamColorPicker size="small" model-value="#526d82" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamColorPicker model-value="#526d82" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerSizesExample' });
import { ref } from 'vue';
import { AsamColorPicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 四档 size 控制触发器。弹层与预设使用组件实际颜色契约；组件没有自定义内容插槽，外部布局负责业务说明。
API 阅读方式
旧无障碍名称属性 label 已移除，改用 ariaLabel（模板中写 aria-label）。显式 popperClass 会保留，并追加当前 ASAM 密度类，以便浮层随四档尺寸匹配。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
局部与全局挂载
切换公开挂载参数后，再打开浮层观察内容位于当前组件附近或挂载到 body。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
vue
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<div class="example">
<AsamColorPicker
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
@change="event = String($event)"
:teleported="globalPopup"
/>
<output>颜色：{{ color }}；change：{{ event }}</output>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerBasicExample' });
import { ref } from 'vue';
import { AsamColorPicker } from '@asam-ui/ui';
const color = ref<string | null>('#526d82');
const event = ref('尚未更改');
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>vue
<template>
<div ref="mountTarget" class="popup-stage" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<div class="example">
<AsamColorPicker
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
@change="event = String($event)"
:teleported="globalPopup"
/>
<output>颜色：{{ color }}；change：{{ event }}</output>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerBasicExample' });
import { ref } from 'vue';
import { AsamColorPicker } from '@asam-ui/ui';
const color = ref('#526d82');
const event = ref('尚未更改');
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>API
属性 AsamColorPickerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | ColorPicker 的 aria-label | string | undefined | — |
id | ColorPicker 的 id | string | undefined | — |
popperClass | ColorPicker 下拉框的类名 | AsamColorPickerPanelProps["hueSliderClass"] | undefined |
popperStyle | ColorPicker 下拉面板的自定义样式 | (AsamColorPickerProps)["popperStyle"] | undefined |
appendTo | 挂载到哪个 DOM 元素 | (AsamColorPickerProps)["appendTo"] | — |
persistent | 当颜色选择器未激活且 persistent 为 false 时，颜色面板将被销毁。 | (AsamColorPickerProps)["persistent"] | true |
teleported | 是否将 popover 的下拉列表渲染至 body 下 | (AsamColorPickerProps)["teleported"] | true |
disabled | 是否禁用 | (AsamColorPickerProps)["disabled"] | undefined |
tabindex | ColorPicker 的 tabindex | (AsamColorPickerProps)["tabindex"] | 0 |
modelValue | 选中项绑定值 | (AsamColorPickerProps)["modelValue"] | undefined |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamColorPickerProps)["valueOnClear"] | undefined |
validateEvent | 是否触发表单验证 | (AsamColorPickerProps)["validateEvent"] | true |
showAlpha | 是否显示 alpha 滑块 | boolean | undefined | false |
colorFormat | 写入 v-model 的颜色的格式 | enum"name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk"完整类型：(AsamColorPickerProps)["colorFormat"] | — |
predefine | 预定义颜色 | string[] | undefined | — |
clearable | 是否显示清除按钮 | (AsamColorPickerProps)["clearable"] | true |
size | 尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
事件 AsamColorPickerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [val: string | null] | — |
change | — | [val: string | null] | — |
activeChange | — | [val: string | null] | — |
focus | — | [evt: FocusEvent] | — |
blur | — | [evt: FocusEvent] | — |
clear | — | (AsamColorPickerEmits)["clear"] | — |
插槽 AsamColorPickerSlots
实例方法与状态 AsamColorPickerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
hide | 手动隐藏颜色选择器 | () => void | — |
focus | 使 input 获取焦点 | () => void | — |
color | 当前色彩对象 | AsamColorPickerPanelExpose["color"] | — |
show | 手动显示颜色选择器 | () => void | — |
blur | 使 input 失去焦点 | () => void | — |
关联组件
参数与事件补充说明
完整透传 2.14.7 的基础参数，并在适用时使用 ASAM 尺寸密度。
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
emptyValues
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueOnClear
必填：否；声明来源：上游声明。
valueOnClear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
valueOnClear.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype:any— 依赖声明valueOnClear.length:number— 依赖声明valueOnClear.arguments:any— 依赖声明valueOnClear.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showAlpha
必填：否；声明来源：上游声明。
showAlpha 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
colorFormat
必填：否；声明来源：上游声明。
colorFormat 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："name" / "rgb" / "prgb" / "hex" / "hex3" / "hex4" / "hex6" / "hex8" / "hsl" / "hsv" / "cmyk"
默认值与来源
未知 / 未声明固定上游文档默认：^[enum]`'hex' (when show-alpha is false) | 'rgb' (when show-alpha is true)`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
predefine
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）AsamColorPickerProps 公开类型视图
ts
import type { AsamColorPickerProps, AsamColorPickerPanelProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamColorPickerProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: string | undefined;
readonly "popperClass"?: AsamColorPickerPanelProps["hueSliderClass"];
readonly "popperStyle"?: (AsamColorPickerProps)["popperStyle"];
readonly "appendTo"?: (AsamColorPickerProps)["appendTo"];
readonly "persistent"?: (AsamColorPickerProps)["persistent"];
readonly "teleported"?: (AsamColorPickerProps)["teleported"];
readonly "disabled"?: (AsamColorPickerProps)["disabled"];
readonly "tabindex"?: (AsamColorPickerProps)["tabindex"];
readonly "modelValue"?: (AsamColorPickerProps)["modelValue"];
readonly "emptyValues"?: unknown[] | undefined;
readonly "valueOnClear"?: (AsamColorPickerProps)["valueOnClear"];
readonly "validateEvent"?: (AsamColorPickerProps)["validateEvent"];
readonly "showAlpha"?: boolean | undefined;
readonly "colorFormat"?: (AsamColorPickerProps)["colorFormat"];
readonly "predefine"?: string[] | undefined;
readonly "clearable"?: (AsamColorPickerProps)["clearable"];
"size"?: AsamControlSize | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：上游声明。
change
必填：是；声明来源：上游声明。
activeChange
必填：是；声明来源：上游声明。
focus
必填：是；声明来源：上游声明。
blur
必填：是；声明来源：上游声明。
clear
必填：是；声明来源：上游声明。
AsamColorPickerEmits 公开类型视图
ts
import type { AsamColorPickerEmits } from '@asam-ui/ui';
// AsamColorPickerEmits
type PublicContract = {
"update:modelValue": [val: string | null];
"change": [val: string | null];
"activeChange": [val: string | null];
"focus": [evt: FocusEvent];
"blur": [evt: FocusEvent];
"clear": (AsamColorPickerEmits)["clear"];
};AsamColorPickerSlots 公开类型视图
ts
import type { AsamColorPickerSlots } from '@asam-ui/ui';
// AsamColorPickerSlots
type PublicContract = {
[key: string]: never;
};参数与事件说明
hide
必填：是；声明来源：上游声明。
hide 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
color
必填：是；声明来源：上游声明。
show
必填：是；声明来源：上游声明。
show 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：上游声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamColorPickerExpose 公开类型视图
ts
import type { AsamColorPickerExpose, AsamColorPickerPanelExpose } from '@asam-ui/ui';
// AsamColorPickerExpose
type PublicContract = {
"hide": () => void;
"focus": () => void;
"color": AsamColorPickerPanelExpose["color"];
"show": () => void;
"blur": () => void;
};