更新记录

0.0.4（2025-09-25）

• fix: 修复缺少lime-color依赖的问题

0.0.3（2025-06-27）

• feat: 支持uniappx

0.0.1（2023-05-30）

• 首次上传

平台兼容性

uni-app(4.44)

uni-app x(4.71)

lime-color-picker 颜色选择器

一个功能强大的颜色选择器组件，支持多种颜色格式，预设颜色，可用于主题定制、样式设计等场景。组件提供了丰富的自定义选项，可以满足各种颜色选择需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 颜色选择器文档 - 站点1
• 颜色选择器文档 - 站点2
• 颜色选择器文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-color-picker
2. 导入后可能需要重新编译项目
3. 在页面中使用l-color-picker组件

代码演示

基础使用

颜色选择器支持多种颜色编码格式，包括 HEX、HSB、RGB。

<l-color-picker v-model="color"></l-color-picker>

const color = ref('#FA8C16')

受控模式

不使用v-model，通过value属性和change事件手动控制颜色值。

<l-color-picker value="#FA8C16" @change="change"></l-color-picker>

const change = (value: UTSJSONObject) => {
    const hex = value['hex'] as string;  // 十六进制颜色值，如 "#FA8C16"
    const rgb = value['rgb'] as string;  // RGB颜色值，如 "rgb(250, 140, 22)"
    const hsb = value['hsb'] as string;  // HSB颜色值，如 "hsb(33, 91%, 98%)"
    console.log('颜色已更改:', hex, rgb, hsb);
}

预设颜色

通过presets属性可以设置预设颜色面板，方便用户快速选择常用颜色。

<l-color-picker :presets="presets"></l-color-picker>

const presets = [{
    label: '推荐颜色',
    colors: [
        '#000000',  // 黑色
        '#000000E0', // 黑色 + 透明度
        '#000000A6',
        '#00000073',
        '#00000040',
        '#00000026',
        '#0000001A',
        '#00000012',
        '#0000000A',
        '#00000005',
        '#F5222D',  // 红色
        '#FA8C16',  // 橙色
        '#FADB14',  // 黄色
        '#8BBB11',  // 青柠色
        '#52C41A',  // 绿色
        '#13A8A8',  // 青色
        '#1677FF',  // 蓝色
        '#2F54EB',  // 靛蓝色
        '#722ED1',  // 紫色
        '#EB2F96',  // 粉红色
        '#F5222D4D', // 带透明度的颜色
        '#FA8C164D',
        '#FADB144D',
        '#8BBB114D',
        '#52C41A4D',
        '#13A8A84D',
        '#1677FF4D',
        '#2F54EB4D',
        '#722ED14D',
        '#EB2F964D',
    ],
},
{
    label: '最近使用',
    colors: [], // 可以动态添加用户最近使用的颜色
}]

搭配弹出层使用

本插件不包含弹出层，在实际应用场景中，颜色选择器通常需要搭配弹出层使用。可以结合 lime-popup 组件实现弹出式颜色选择器。

<button type="primary" @click="showPicker = true">打开颜色选择器</button>
<l-popup v-model="showPicker" position="bottom">
    <l-color-picker 
        v-model="color" 
        :presets="presets" 
        @change="change" 
        @formatChange="formatChange">
    </l-color-picker>
</l-popup>

const showPicker = ref(false)
const color = ref('#fa8c16')

const change = (value: UTSJSONObject) => {
    const hex = value['hex'] as string;
    const rgb = value['rgb'] as string;
    const hsb = value['hsb'] as string;
    console.log('选择的颜色:', hex, rgb, hsb);
}

const formatChange = (format: string) => {
    console.log('当前颜色格式:', format) // 'hex', 'rgb', 或 'hsb'
}

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明

l-color-picker 为组件标签
lime-color-picker 为演示标签

API文档

Props 属性说明

Events 事件

主题定制

组件提供了丰富的CSS变量，可以通过自定义CSS变量来自定义组件样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助