ColorPicker 颜色选择器

用于选择颜色，支持 HEX、RGB、HSL 等多种格式。

基础用法

通过 v-model 绑定颜色值。

当前颜色: #409eff

<template>
  <ZcColorPicker v-model="color" />
  <p>当前颜色: {{ color }}</p>
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#409eff')
</script>

透明度

设置 show-alpha 属性可开启透明度选择。

<template>
  <ZcColorPicker v-model="color" show-alpha />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('rgba(64, 158, 255, 0.8)')
</script>

预定义颜色

通过 predefine 属性传入预定义颜色列表。

<template>
  <ZcColorPicker v-model="color" :predefine="predefineColors" />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#409eff')
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  '#ff69b4',
]
</script>

ColorPicker API

Props

参数	说明	类型	默认值
modelValue	绑定值	string	'#409eff'
disabled	是否禁用	boolean	false
size	尺寸	'large' | 'medium' | 'small'	'medium'
format	颜色格式	'hex' | 'rgb' | 'hsl'	'hex'
showAlpha	是否支持透明度选择	boolean	false
predefine	预定义颜色	string[]	[]

Events

事件名	说明	回调参数
change	确认颜色时触发	(value: string)
active-change	面板中颜色变化时触发	(value: string)