Skip to content

介绍


本文档主要用于描述 ShadcnColorPicker 组件的一些特性和用法。

用法

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value"  :dark="darkMode" />
</template>

颜色 (color)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" color="undefined"  :dark="darkMode" />
</template>

禁用 (disabled)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" disabled  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :disabled="false"  :dark="darkMode" />
</template>

只读 (readonly)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" readonly  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :readonly="false"  :dark="darkMode" />
</template>

预设颜色 (preset-colors)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" :presetColors="['#fbbf24', '#737373', '#38bdf8', '#818cf8', '#e879f9', '#475569', '#c084fc', '#2dd4bf', '#34d399', '#fb7185', '#fb923c']"  :dark="darkMode" />
</template>

格式 (format)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" format="auto"  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" format="hex"  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" format="rgb"  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" format="hsl"  :dark="darkMode" />
</template>

显示面板 (show-panel)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" showPanel  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :showPanel="false"  :dark="darkMode" />
</template>

显示吸管 (show-dropper)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" showDropper  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :showDropper="false"  :dark="darkMode" />
</template>

显示透明度 (show-transparency)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" showTransparency  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :showTransparency="false"  :dark="darkMode" />
</template>

显示格式 (show-format)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" showFormat  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :showFormat="false"  :dark="darkMode" />
</template>

液态玻璃效果 (glass)

查看代码
vue
<template>
    <ShadcnColorPicker v-model="value" glass  :dark="darkMode" />
    <ShadcnColorPicker v-model="value" :glass="false"  :dark="darkMode" />
</template>

颜色选择器 (Color Picker) 属性

颜色选择器 (Color Picker) 事件