BreezeUI
  • 简体中文

    • Color Picker 颜色选择器

    基于 BrConfigProvider 实现全局主题配置，支持多格式、透明度调节的企业级颜色选择器，可无缝集成 BrFormItem。

    组件特性

    • 🎨 多种颜色格式：支持 HEX、RGB、RGBA、HLSL、HSLA 颜色格式输入和显示。
    • 🔘 Alpha 通道：支持透明度调节。
    • 🎨 预设颜色：内置预设颜色面板用于快速选择。
    • 📐 内联和弹出：支持内联显示和弹出触发模式。
    • 📝 表单集成：支持与 BrFormItem 和 vee-validate 无缝集成。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础使用

    提供基础的颜色选择能力。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#3b82f6')
</script>

<template>
  <BrColorPicker v-model="color" clearable />
</template>

    预设颜色

    支持提供常用颜色预设，方便快速选择。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#ef4444')
const presets = [
  '#ef4444', '#f97316', '#f59e0b', '#84cc16', 
  '#22c55e', '#10b981', '#14b8a6', '#06b6d4'
]
</script>

<template>
  <BrColorPicker v-model="color" :presets="presets" clearable />
</template>

    格式与透明度

    支持透明度调节，并能在 hex、rgba、hsla 等多种格式间切换。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('rgba(16, 185, 129, 0.5)')
</script>

<template>
  <BrColorPicker 
    v-model="color" 
    format="rgba" 
    show-alpha 
    clearable 
  />
</template>

    内联模式

    除了默认的弹出框模式，也支持直接内联显示拾色器面板。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrColorPicker } from '@breezeui/vue'

const color = ref('#f59e0b')
</script>

<template>
  <BrColorPicker v-model="color" mode="inline" />
</template>

    表单集成

    无缝集成 BrFormItem，支持颜色值绑定与校验状态联动。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrForm, BrFormItem, BrColorPicker, BrButton } from '@breezeui/vue'

const formValues = ref({ themeColor: '' })
const formErrors = ref<Record<string, string>>({})

const handleSubmit = () => {
  if (!formValues.value.themeColor) {
    formErrors.value.themeColor = 'Please select a theme color / Please select theme color'
  } else {
    formErrors.value = {}
    alert('Submitted successfully! / Submit successful！')
  }
}
</script>

<template>
  <BrForm class="space-y-4 max-w-sm" @submit="handleSubmit">
    <BrFormItem 
      label="Theme Color" 
      name="themeColor"
      :error-message="formErrors.themeColor"
      :validation-state="formErrors.themeColor ? 'error' : 'default'"
      required
    >
      <BrColorPicker v-model="formValues.themeColor" clearable />
    </BrFormItem>
    <BrButton type="submit">Submit</BrButton>
  </BrForm>
</template>

    主题定制

    结合 BrConfigProvider，您可以轻松实现全局和局部的主题样式定制。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrColorPicker } from '@breezeui/vue'

const theme = ref({
  primary: '#8b5cf6', // Custom global primary color
  radius: 0.75, // Custom global border radius
})

const color = ref('#3b82f6')
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrColorPicker v-model="color" />
    
    <BrColorPicker 
      v-model="color" 
      class="border-blue-500 shadow-lg mt-4" 
    />
  </BrConfigProvider>
</template>

    API

    Props

    属性名类型默认值说明
    modelValuestringundefined绑定的颜色值
    defaultValuestringundefined默认颜色值
    mode'popover' | 'inline''popover'显示模式
    format'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv''hex'颜色格式
    showAlphabooleanfalse是否显示透明度调节滑块
    presetsstring[]undefined预设颜色数组
    presetColsnumber8预设颜色面板的列数
    presetGapnumber | string8预设颜色面板的间距
    disabledbooleanfalse是否禁用
    readonlybooleanfalse是否只读
    validationState'success' | 'warning' | 'error' | 'default''default'校验状态（结合表单自动同步）
    clearablebooleanfalse是否显示清空按钮
    placeholderstring'Select color'占位文本

    Emits

    事件名参数说明
    update:modelValue(value: string | undefined)绑定值更新时触发
    change(value: string | undefined)颜色发生变化时触发
    clear()点击清空按钮时触发