ColorChooser
简介
MColorChooser 是一个可视化的颜色选择器组件，提供直观的颜色拾取界面。用户可以通过色盘、HSL 滑块等方式选择颜色，支持多种颜色格式输出。
基础用法
最简单的颜色选择器：
<script setup lang="ts">
const color = ref('#3b82f6')
</script>
<template>
<MColorChooser v-model="color" />
</template>
颜色格式
通过 format 指定颜色输出格式，在表单中选择颜色配置：
<script setup lang="ts">
const hexColor = ref('#ff6b6b')
const rgbColor = ref('rgb(107, 182, 255)')
const hslColor = ref('hsl(210, 100%, 71%)')
</script>
<template>
<div class="space-y-4">
<UFormField label="HEX 格式">
<MColorChooser v-model="hexColor" format="hex" />
</UFormField>
<UFormField label="RGB 格式">
<MColorChooser v-model="rgbColor" format="rgb" />
</UFormField>
<UFormField label="HSL 格式">
<MColorChooser v-model="hslColor" format="hsl" />
</UFormField>
</div>
</template>
自定义按钮
通过 buttonProps 自定义按钮样式：
<script setup lang="ts">
const themeColor = ref('#3b82f6')
</script>
<template>
<MColorChooser
v-model="themeColor"
:button-props="{
label: '选择主题色',
color: 'primary',
variant: 'outline',
class: 'w-full'
}"
/>
</template>
自定义插槽
使用默认插槽自定义触发元素：
<script setup lang="ts">
const brandColor = ref('#3b82f6')
</script>
<template>
<MColorChooser v-model="brandColor">
<template #default>
<div
class="size-12 rounded-lg border-2 border-gray-300 cursor-pointer hover:scale-110 transition-transform"
:style="{ backgroundColor: brandColor }"
/>
</template>
</MColorChooser>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
popoverProps | PopoverProps<"click"> | |
buttonProps | ButtonProps
| |
throttle | numberThrottle time in ms for the color picker | |
disabled | boolean Disable the color picker | |
defaultValue | stringThe default value of the color picker | |
format | 'hex' | "hex" | "rgb" | "hsl" | "cmyk" | "lab"Format of the color |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
modelValue | string | |
ui | { root?: ClassNameValue; picker?: ClassNameValue; selector?: ClassNameValue; selectorBackground?: ClassNameValue; selectorThumb?: ClassNameValue; track?: ClassNameValue; trackThumb?: ClassNameValue; } |
Emits
| Event | Type |
|---|---|
close:prevent | [] |
update:open | [value: boolean] |
update:modelValue | [value: string | undefined] |
Slots
| Slot | Type |
|---|---|
default | { open: boolean; } |
leading | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
trailing | { ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
anchor | { close: () => void; } |