ColorPicker-Demo

#4F6BEDCC

Ring

Box

Red

Green

Blue

Opacity

<script setup lang="ts">
import { ref } from 'vue';

const color = ref('#4F6BEDCC');
const colorMode = ref<'ring' | 'box'>('ring');
</script>

<template>
  <fv-color-picker
    v-model="color"
    :type="colorMode"
  />
</template>

ColorPicker-Color Info

`v-model` 仍然返回十六进制字符串。如果你需要更多颜色信息，可以通过 `update:modelValue` 的第二个参数拿到 `hex`、`rgba`、`hsla`，也可以直接监听 `color-info`。

Red

Green

Blue

Opacity

{
  "hex": "#6B69D6CC",
  "rgba": {
    "r": 107,
    "g": 105,
    "b": 214,
    "a": 0.8
  },
  "hsla": {
    "h": 241.1,
    "s": 57.59,
    "l": 62.55,
    "a": 0.8
  }
}

<script setup lang="ts">
import { ref } from 'vue';

const color = ref('#6B69D6CC');

function handleUpdate(value: string, info?: {
  hex: string;
  rgba: { r: number; g: number; b: number; a: number };
  hsla: { h: number; s: number; l: number; a: number };
}) {
  console.log(value);
  console.log(info);
}
</script>

<template>
  <fv-color-picker
    v-model="color"
    @update:modelValue="handleUpdate"
  />
</template>

ColorPicker-Hide Fields

`hideFields` 可以隐藏下方的数值编辑区和颜色模式切换，让组件更适合紧凑布局。

<fv-color-picker
  v-model="color"
  hideFields
/>

ColorPicker-Control Sliders

`value`、`saturation`、`alpha` 三个滑条可以分别控制显示状态，适合按业务场景做简化。

<fv-color-picker
  v-model="color"
  hideFields
  :showValueSlider="false"
  :showSaturationSlider="false"
  :showAlphaSlider="true"
/>

ColorPicker-Ring Only

`type="ring"` 会把颜色区域切换成圆环取色形式，适合更强调 Hue 选择的场景。

Red

Green

Blue

Opacity

<fv-color-picker
  v-model="color"
  type="ring"
/>

属性

属性	类型	必填	默认值	说明
disabled	boolean	否	false	是否禁用组件。
lang	string	否	"global"	继承全局语言配置。
modelValue	string	否	undefined	绑定的颜色字符串，支持 #RRGGBB 和 #RRGGBBAA。
theme	string	否	'global'	主题风格，支持 global、light、dark、system、custom。
type	'box' | 'ring'	否	'box'	颜色区域的交互模式。
foreground	string	否	''	内部输入控件使用的强调色。
hideFields	boolean	否	false	是否隐藏下方的 fields 数值编辑区域。
showValueSlider	boolean	否	true	是否显示明度滑条。
showSaturationSlider	boolean	否	true	是否显示饱和度滑条。
showAlphaSlider	boolean	否	true	是否显示透明度滑条。

事件

事件名	参数	说明
update:modelValue	value: string, info?: { hex, rgba, hsla }	更新 v-model 字符串，同时可通过第二个参数拿到结构化颜色对象。
color-info	info: { hex, rgba, hsla }	仅返回结构化颜色对象。