ColorPicker 颜色选择器

基于 vue-color 封装的颜色选择器组件，支持多种颜色格式输出、透明度设置、颜色预览等功能。

基础用法

基础用法

当前颜色: 未选择

不同输出格式

Hex: 未选择

RGB: 未选择

自定义触发器

当前颜色: 未选择

复制代码

查看代码

<template>
  <div class="demo-wrapper">
      <div class="demo-item">
        <h3>基础用法</h3>
        <a-space>
          <SColorPicker v-model:color="color1" placeholder="请选择颜色" />
          <span>当前颜色: {{ color1 || '未选择' }}</span>
        </a-space>
      </div>
      
      <div class="demo-item">
        <h3>不同输出格式</h3>
        <a-space direction="vertical" style="width: 100%">
          <a-space>
            <SColorPicker v-model:color="color2" format="hex" placeholder="Hex 格式" />
            <span>Hex: {{ color2 || '未选择' }}</span>
          </a-space>
          <a-space>
            <SColorPicker v-model:color="color3" format="rgb" placeholder="RGB 格式" />
            <span>RGB: {{ color3 || '未选择' }}</span>
          </a-space>
        </a-space>
      </div>

      <div class="demo-item">
        <h3>自定义触发器</h3>
        <a-space>
          <SColorPicker placement="right" v-model:color="color4" placeholder="请选择颜色">
            <a-button type="primary">选择颜色</a-button>
          </SColorPicker>
          <span>当前颜色: {{ color4 || '未选择' }}</span>
        </a-space>
      </div>
    </div>
</template>

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

const color1 = ref('')
const color2 = ref('')
const color3 = ref('')
const color4 = ref('')
</script>

<style scoped lang="less">
.demo-wrapper {
  width: 100%;
}

.demo-item {
  margin-bottom: 24px;

  h3 {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>

API

Props

参数	说明	类型	默认值
color	当前选中的颜色值	string	-
placeholder	输入框占位符	string	-
placement	颜色选择器弹出位置	'left' | 'right' | 'top' | 'bottom'	'left'
format	颜色输出格式	'hex' | 'rgb' | 'hsb'	'hex'

Events

事件名	说明	回调参数
update:color	颜色值变化时触发	(color: string) => void

插槽

插槽名	说明
default	自定义触发器内容

颜色格式支持

组件支持三种颜色格式输出，所有格式都自动支持透明度：

1. Hex 格式 (默认)

// 无透明度
"#ff0000"

// 有透明度 (8位 hex)
"#ff0000ff"

2. RGB 格式

// 无透明度
"rgb(255, 0, 0)"

// 有透明度
"rgba(255, 0, 0, 0.5)"

3. HSB 格式

// 无透明度
"hsv(0, 100%, 100%)"

// 有透明度
"hsva(0, 100%, 100%, 0.5)"