ColorPicker 颜色选择器 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# ColorPicker 颜色选择器 3.5.28

颜色选择器，一个功能强大的颜色选择组件，支持多种颜色格式，预设颜色，可用于主题定制、样式设计等场景。

# 使用场景

当需要用户选择颜色时，如主题定制、样式设计
支持多种使用模式：插入模式和弹出层模式
提供预设颜色，方便用户快速选择常用颜色
支持多种颜色格式：HEX、RGB、HSB等

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

# 基本使用

# 插入模式

通过 insert 属性设置为插入模式，组件会直接嵌入到页面中：

<template>
  <view>
    <u-color-picker v-model="color" :insert="true"></u-color-picker>
    <view class="color-info">
      <text>当前颜色: {{ color }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      color: '#1890FF'
    };
  }
};
</script>
✅ Copy success!

# 弹出层模式

默认模式为弹出层，通过 show 属性控制显示和隐藏：

<template>
  <view>
    <u-button type="primary" @click="showPicker = true">打开颜色选择器</u-button>
    <u-color-picker 
      :show="showPicker" 
      @confirm="handlerConfirm" 
      @close="showPicker = false"
    ></u-color-picker>
    <view class="color-info">
      <text>选择的颜色: {{ selectedColor }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedColor: ''
    };
  },
  methods: {
    handlerConfirm(value) {
      this.selectedColor = value;
      this.showPicker = false;
    }
  }
};
</script>
✅ Copy success!

# 自定义预设颜色

通过 presets 属性可以自定义预设颜色分组：

<template>
  <u-color-picker 
    v-model="color" 
    :insert="true"
    :presets="customPresets"
  ></u-color-picker>
</template>

<script>
export default {
  data() {
    return {
      color: '#1890FF',
      customPresets: [
        {
          label: '品牌色',
          colors: [
            '#1890FF', '#52C41A', '#FAAD14', '#F5222D'
          ]
        },
        {
          label: '渐变色',
          colors: [
            '#FF6B6B', '#FFB366', '#4ECDC4', '#45B7D1'
          ]
        }
      ]
    };
  }
};
</script>
✅ Copy success!

# 禁用状态

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

<u-color-picker v-model="color" :insert="true" :disabled="true"></u-color-picker>
✅ Copy success!

# 自定义底部按钮

在弹出层模式下，可以通过 footer 插槽自定义底部按钮：

<template>
  <u-color-picker :show="showPicker" @close="showPicker = false">
    <template #footer>
      <view class="custom-footer">
        <u-button @click="showPicker = false">取消</u-button>
        <u-button type="primary" @click="confirmColor">确定</u-button>
      </view>
    </template>
  </u-color-picker>
</template>
✅ Copy success!

# 页面源码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
value / modelValue	绑定值，支持HEX、RGB、HSB格式	String	-	-
defaultColor	默认颜色值	String	theme.primary	-
insert	是否插入模式	Boolean	false	true
show	是否显示弹出层	Boolean	false	true
closeable	是否显示关闭按钮	Boolean	true	false
closeOnClickOverlay	是否允许点击遮罩关闭	Boolean	true	false
title	弹出层标题	String	'选择颜色'	-
zIndex	弹出层层级	String \| Number	10010	-
round	弹出层圆角值	String \| Number	6	-
disabled	是否禁用颜色选择器	Boolean	false	true
confirmShape	确认按钮形状	String	'circle'	-
confirmText	确认按钮文字	String	'确认'	-
showPresets	是否显示预设颜色	Boolean	true	false
showAlphaSlider	是否显示透明度选择器	Boolean	true	false
showHueSlider	是否显示色调选择器	Boolean	true	false
presets	预设的颜色分组	Array	见下方说明	-

# Presets 预设颜色结构

presets: [
  {
    label: '推荐颜色', // 分组标签
    colors: [         // 颜色数组
      '#FF0000', '#FF8C00', '#FFD700', '#00FF00'
    ]
  }
]
✅ Copy success!

# Events

事件名	说明	回调参数
change	颜色值变化时触发	{ colorFormat: String }
formatChange	颜色格式变化时触发	Object
open	弹出层打开时触发	-
close	弹出层关闭时触发	-
confirm	点击确认按钮时触发	String (当前选择的颜色值)

# Slots

插槽名	说明
footer	自定义底部按钮区域

# 注意事项

组件支持 Vue2 和 Vue3 的 v-model 语法
在插入模式下，组件会直接渲染在页面中
在弹出层模式下，需要通过 show 属性控制显示状态
预设颜色支持自定义分组和颜色值
组件会自动处理不同颜色格式之间的转换

← Poster 海报生成器 Tree 树形组件 →