ColorPicker 颜色选择器

用于颜色选择的组件，支持 Hex 和 RGB 格式。

基本用法

可通过 value 设置实时颜色值，通过 @change 设置修改颜色值触发的方法，通过 @trigger 设置切换颜色面板显示隐藏时触发的方法。

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-color-picker />
  <h4>有默认值（非受控）</h4>
  <i-color-picker :defaultValue="currentValue" />
  <h4>有固定值（受控）</h4>
  <i-color-picker :modelValue="currentValue" />
  <h4>一般用法</h4>
  <i-color-picker
    :modelValue="currentValue"
    @change="handleChange"
    @trigger="handleTrigger"
  />
  <h4>v-model 用法</h4>
  <i-color-picker
    v-model="currentValue"
    @trigger="handleTrigger"
  />
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref('rgb(92, 192, 131)')

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}

const handleTrigger = (val, visible) => {
  console.log(val, visible)
}
</script>

显示代码复制代码复制代码

禁用状态

可通过 disabled 属性禁用颜色选择器。

<template>
  <i-color-picker disabled />
</template>

显示代码复制代码复制代码

不同尺寸

提供 small、medium（默认）、large 三种尺寸的颜色触发块。

<template>
  <div class="idesign-demo-block-row">
    <i-color-picker size="small" />
    <i-color-picker size="medium" />
    <i-color-picker size="large" />
  </div>
</template>

显示代码复制代码复制代码

预设颜色

可通过 colorList 属性传入颜色数组设置预设颜色。

<template>
  <i-color-picker :colorList="defaultColor" />
</template>

<script setup>
const defaultColor = [
  {
    value: 'rgb(206, 55, 46)'
  },
  {
    value: 'rgb(245, 192, 66)'
  },
  {
    value: 'rgb(92, 192, 131)'
  },
  {
    value: 'rgb(86, 116, 245)'
  },
  {
    value: 'rgb(103, 98, 192)'
  }
]
</script>

显示代码复制代码复制代码

颜色面板

可通过 <i-color-picker.Panel /> 单独使用颜色面板。

颜色选择器

<template>
  <i-color-panel />
</template>

显示代码复制代码复制代码

禁用颜色面板

可通过 disabled 属性禁用独立的颜色面板。

颜色选择器

<template>
  <i-color-panel disabled />
</template>

显示代码复制代码复制代码

ColorPicker Attributes

属性	说明	类型	默认值
triggerClassName	触发颜色块类名	string	--
triggerStyle	触发颜色块样式	CSSProperties	--
size	触发颜色块尺寸	"small"〡"medium"〡"large"	medium
value	固定颜色值（受控）	string	--
defaultValue	默认颜色值（非受控）	string	#5e62ea
colorList	底部预设颜色	colorListType[]	--
disabled	是否禁用颜色选择器	boolean	false

ColorPicker Events

属性	说明	类型	默认值
change	修改颜色值时触发	(val: string) => void	--
trigger	切换颜色面板时触发	(val: string, visible: boolean) => void	--

ColorPanel Attributes

属性	说明	类型	默认值
modelValue / v-model	固定颜色值（受控）	string	--
defaultValue	默认颜色值（非受控）	string	#5e62ea
colorList	底部预设颜色	colorListType[]	--
disabled	禁用颜色面板	boolean	false

ColorPanel Events

属性	说明	类型	默认值
change	修改颜色值时触发	(val: string) => void	--