FxColorPickerPanel 颜色选择器面板

纯面板组件（不带浮层 / 触发器），独立可用。FxColorPicker 在浮层内渲染本组件（border=false）。

FxColorPickerPanel 属于 @fx/components。

基础用法

<template>
  <FxColorPickerPanel v-model="color" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxColorPickerPanel } from "@fx/components"

const color = ref("#1E293B")
</script>

透明度

show-alpha 显示透明度滑块。

<template>
  <FxColorPickerPanel v-model="color" show-alpha />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxColorPickerPanel } from "@fx/components"

const color = ref("rgba(19, 206, 102, 0.8)")
</script>

边框

border 控制是否带边框（默认 true）。FxColorPicker 内部使用时设为 false。

<template>
  <div class="flex flex-wrap items-start gap-6">
    <div class="p-4">
      <p class="mb-3 text-center text-sm text-gray-500">无边框</p>
      <FxColorPickerPanel v-model="value" :border="false" />
    </div>
    <div class="p-4">
      <p class="mb-3 text-center text-sm text-gray-500">有边框（默认）</p>
      <FxColorPickerPanel v-model="value" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxColorPickerPanel } from "@fx/components"

const value = ref("#1E293B")
</script>

禁用

disabled 完全禁用面板（滑块、预设色、输入框均不可操作）。

<template>
  <FxColorPickerPanel
    v-model="color"
    disabled
    show-alpha
    :predefine="predefineColors"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxColorPickerPanel } from "@fx/components"

const color = ref("#1E293B")
const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
]
</script>

预定义颜色

<template>
  <FxColorPickerPanel v-model="color" show-alpha :predefine="predefineColors" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxColorPickerPanel } from "@fx/components"

const color = ref("rgba(255, 69, 0, 0.68)")
const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577",
]
</script>

局部引入

import { FxColorPickerPanel } from "@fx/components"

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值	string | null	—
border	是否带边框	boolean	true
show-alpha	是否显示透明度滑块	boolean	false
color-format	颜色格式	'rgb' | 'hex' | 'prgb' | 'hsl' | 'hsv' | 'name' | 'hex8'	—
disabled	是否禁用	boolean	false
predefine	预定义颜色（带「预设」分组标题）	string[]	—
footer	是否显示底部（输入框与 footer 插槽）	boolean	true
history	是否显示上次选择色块（带「最近使用」分组标题）	boolean	false
validate-event	是否触发表单校验	boolean	true
hue-slider-class	hue 滑块自定义类名	string | object | array	—
hue-slider-style	hue 滑块自定义样式	CSSProperties	—

Events

名称	说明
update:model-value	值更新
pick	离散完成时触发（色块点击 / 拖动结束 / 输入确认），参数 (value, source)，source 为 swatch / drag / input

Slots

名称	说明
footer	面板底部（FxColorPicker 用于放清空 / 确认按钮；footer=false 时不渲染）

Exposes

名称	说明
color	当前颜色对象（基于 @ctrl/tinycolor）
input-ref	自定义输入框实例
update	手动刷新子组件（hue / sv / alpha 滑块）

实现说明

• 颜色核心基于 @ctrl/tinycolor，支持 hex/rgb/hsl/hsv 等格式互转
• 与 FxColorPicker 通过 provide/inject（ROOT_COMMON_COLOR_INJECTION_KEY）共享同一 Color 实例
• 样式走 @fx/styles token，亮暗自动跟随