介绍
本文档主要用于描述 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>