更新记录

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不喜勿下

文档

🚀 color-picker【站点1】 🌍 color-picker【站点2】 🔥 color-picker【站点3】

安装

插件市场导入

代码演示

基础使用

颜色编码格式，支持 HEX、HSB、RGB。

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

const color = ref('#FA8C16')

受控模式

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

const change = (value: UTSJSONObject) => {
    const hex = value['hex'] as string;
    const rgb = value['rgb'] as string;
    const hsb = value['hsb'] as string;
}

预设颜色

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

const presets = [{
    label: 'Recommended',
    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: 'Recent',
    colors: [],
}]

查看示例

导入后直接使用这个标签查看演示效果，

// 代码位于 uni_modules/lime-color-picker/compoents/lime-color-picker
<lime-color-picker />

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

插件标签

• 默认 l-color-picker 为 component
• 默认 lime-color-picker 为 demo

API

Props

CSS变量

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

使用示例：

/* 自定义颜色选择器样式 */
.l-color-picker {
  --l-color-picker-palette-height: 300px;
  --l-color-picker-handle-size: 30px;
  --l-color-picker-preset-color-size: 32px;
}

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。