使用场景
常驻调色面板，在布局中直接编辑颜色；不提供触发输入与弹层。
格式、透明度与预设
showAlpha 开启透明度，colorFormat 决定输出表示，predefine 提供快捷颜色。模型是颜色文本或 null。
格式、透明度与预设
vue
<template>
<div class="example">
<AsamColorPickerPanel
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
>
<template #footer> 颜色实时更新 </template>
</AsamColorPickerPanel>
<output>颜色：{{ color }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerPanelBasicExample' });
import { ref } from 'vue';
import { AsamColorPickerPanel } from '@asam-ui/ui';
const color = ref<string | null>('#526d82');
</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">
<AsamColorPickerPanel
ref="control"
v-bind="{ 'show-alpha': true, 'color-format': 'hex' }"
v-model="color"
:predefine="['#526d82', '#18a058', '#d03050']"
>
<template #footer> 颜色实时更新 </template>
</AsamColorPickerPanel>
<output>颜色：{{ color }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerPanelBasicExample' });
import { ref } from 'vue';
import { AsamColorPickerPanel } from '@asam-ui/ui';
const color = ref('#526d82');
</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>实例与禁用状态
面板公开 color、inputRef、update；update 重新同步颜色。footer 插槽提供附加内容。面板自身没有公开 size。
实例与禁用状态
vue
<template>
<div class="example">
<AsamColorPickerPanel ref="control" v-model="color" :disabled="disabled" />
<div class="row">
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="control?.update()"> 同步颜色 </AsamButton>
</div>
<output>颜色：{{ color }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamColorPickerPanelInstanceExample' });
import { ref } from 'vue';
import { AsamColorPickerPanel, AsamButton } from '@asam-ui/ui';
import type { AsamColorPickerPanelExpose } from '@asam-ui/ui';
const control = ref<AsamColorPickerPanelExpose>();
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">
<AsamColorPickerPanel ref="control" v-model="color" :disabled="disabled" />
<div class="row">
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="control?.update()"> 同步颜色 </AsamButton>
</div>
<output>颜色：{{ color }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamColorPickerPanelInstanceExample' });
import { ref } from 'vue';
import { AsamColorPickerPanel, 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>ASAM 扩展与迁移
当前面板只支持实际原始颜色契约与 footer 插槽；四档尺寸属于外部 ColorPicker 输入触发器，不添加无效 size。
边框、色相样式与禁用
border 省略时显示边框，false 用于常驻在已有容器内的面板。disabled 禁止全部颜色操作。 hueSliderClass / hueSliderStyle 应用到色相条，不改变颜色格式；showAlpha 与 hex8 在示例中 保留透明度。footer 用于附加内容，仍由面板提供输入和颜色同步。
边框、透明色、色相样式与禁用
vue
<template>
<div class="example">
<AsamColorPickerPanel
v-model="color"
:border="bordered"
:disabled="disabled"
show-alpha
color-format="hex8"
:predefine="['#18a05880', '#d03050ff']"
hue-slider-class="example-hue"
:hue-slider-style="{ borderRadius: '6px' }"
>
<template #footer>透明色：{{ color }}</template>
</AsamColorPickerPanel>
<AsamCheckboxItem v-model="bordered">显示边框</AsamCheckboxItem>
<AsamCheckboxItem v-model="disabled">禁用面板</AsamCheckboxItem>
<output>{{ color }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamColorPickerPanel, AsamCheckboxItem } from '@asam-ui/ui';
const color = ref<string | null>('#18a05880');
const bordered = ref(true);
const disabled = ref(false);
defineOptions({ name: 'AsamColorPickerPanelAppearanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>vue
<template>
<div class="example">
<AsamColorPickerPanel
v-model="color"
:border="bordered"
:disabled="disabled"
show-alpha
color-format="hex8"
:predefine="['#18a05880', '#d03050ff']"
hue-slider-class="example-hue"
:hue-slider-style="{ borderRadius: '6px' }"
>
<template #footer>透明色：{{ color }}</template>
</AsamColorPickerPanel>
<AsamCheckboxItem v-model="bordered">显示边框</AsamCheckboxItem>
<AsamCheckboxItem v-model="disabled">禁用面板</AsamCheckboxItem>
<output>{{ color }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamColorPickerPanel, AsamCheckboxItem } from '@asam-ui/ui';
const color = ref('#18a05880');
const bordered = ref(true);
const disabled = ref(false);
defineOptions({ name: 'AsamColorPickerPanelAppearanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamColorPickerPanelProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 是否禁用 | boolean | undefined | false |
border | 颜色选择器面板是否有边框 | (AsamColorPickerPanelProps)["border"] | true |
modelValue | 选中项绑定值 | (AsamColorPickerPanelProps)["modelValue"] | undefined |
validateEvent | 是否触发表单验证 | (AsamColorPickerPanelProps)["validateEvent"] | true |
showAlpha | 是否显示 alpha 滑块 | boolean | undefined | false |
colorFormat | 写入 v-model 的颜色的格式 | enum"name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk"完整类型：(AsamColorPickerPanelProps)["colorFormat"] | — |
predefine | 预定义颜色 | string[] | undefined | — |
hueSliderClass | 类名将会传递给 hue-slider | AsamColorPickerPanelProps["hueSliderClass"] | undefined |
hueSliderStyle | 样式将会传递给 hue-slider | (AsamColorPickerPanelProps)["hueSliderStyle"] | undefined |
事件 AsamColorPickerPanelEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [val: string | null] | — |
插槽 AsamColorPickerPanelSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
footer | — | (() => unknown) | undefined | — |
实例方法与状态 AsamColorPickerPanelExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update | 更新子组件 | () => void | — |
color | 当前色彩对象 | AsamColorPickerPanelExpose["color"] | — |
inputRef | 自定义 input ref | (AsamColorPickerPanelExpose)["inputRef"] | — |
关联组件
参数与事件补充说明
完整透传 2.14.7 的基础参数，并在适用时使用 ASAM 尺寸密度。
参数与事件说明
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
border
必填：否；声明来源：上游声明。
border 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：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 运行实测）
hueSliderClass
必填：否；声明来源：上游声明。
hueSliderClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
hueSliderStyle
必填：否；声明来源：上游声明。
hueSliderStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamColorPickerPanelProps 公开类型视图
ts
import type { AsamColorPickerPanelProps } from '@asam-ui/ui';
// AsamColorPickerPanelProps
type PublicContract = {
readonly "disabled"?: boolean | undefined;
readonly "border"?: (AsamColorPickerPanelProps)["border"];
readonly "modelValue"?: (AsamColorPickerPanelProps)["modelValue"];
readonly "validateEvent"?: (AsamColorPickerPanelProps)["validateEvent"];
readonly "showAlpha"?: boolean | undefined;
readonly "colorFormat"?: (AsamColorPickerPanelProps)["colorFormat"];
readonly "predefine"?: string[] | undefined;
readonly "hueSliderClass"?: AsamColorPickerPanelProps["hueSliderClass"];
readonly "hueSliderStyle"?: (AsamColorPickerPanelProps)["hueSliderStyle"];
};参数与事件说明
update:modelValue
必填：是；声明来源：上游声明。
AsamColorPickerPanelEmits 公开类型视图
ts
import type { AsamColorPickerPanelEmits } from '@asam-ui/ui';
// AsamColorPickerPanelEmits
type PublicContract = {
"update:modelValue": [val: string | null];
};参数与事件说明
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamColorPickerPanelSlots 公开类型视图
ts
import type { AsamColorPickerPanelSlots } from '@asam-ui/ui';
// AsamColorPickerPanelSlots
type PublicContract = {
"footer"?: (() => unknown) | undefined;
};参数与事件说明
update
必填：是；声明来源：上游声明。
update 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
color
必填：是；声明来源：上游声明。
inputRef
必填：是；声明来源：上游声明。
AsamColorPickerPanelExpose 公开类型视图
ts
import type { AsamColorPickerPanelExpose } from '@asam-ui/ui';
// AsamColorPickerPanelExpose
type PublicContract = {
"update": () => void;
"color": AsamColorPickerPanelExpose["color"];
"inputRef": (AsamColorPickerPanelExpose)["inputRef"];
};