介绍
本文档主要用于描述 ShadcnColorPicker 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" />
</template>颜色 (color)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" color="undefined" />
</template>禁用 (disabled)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" disabled />
<ShadcnColorPicker v-model="value" :disabled="false" />
</template>只读 (readonly)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" readonly />
<ShadcnColorPicker v-model="value" :readonly="false" />
</template>预设颜色 (preset-colors)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" :presetColors="['#fbbf24', '#737373', '#38bdf8', '#818cf8', '#e879f9', '#475569', '#c084fc', '#2dd4bf', '#34d399', '#fb7185', '#fb923c']" />
</template>格式 (format)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" format="auto" />
<ShadcnColorPicker v-model="value" format="hex" />
<ShadcnColorPicker v-model="value" format="rgb" />
<ShadcnColorPicker v-model="value" format="hsl" />
</template>显示面板 (show-panel)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" showPanel />
<ShadcnColorPicker v-model="value" :showPanel="false" />
</template>显示吸管 (show-dropper)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" showDropper />
<ShadcnColorPicker v-model="value" :showDropper="false" />
</template>显示透明度 (show-transparency)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" showTransparency />
<ShadcnColorPicker v-model="value" :showTransparency="false" />
</template>显示格式 (show-format)
查看代码
vue
<template>
<ShadcnColorPicker v-model="value" showFormat />
<ShadcnColorPicker v-model="value" :showFormat="false" />
</template>