更新记录

1.0.0（2026-04-01） 下载此版本

颜色选择器 layne-color-picker，配置简单，支持透明度，支持H5、vue2、vue3、android、ios。

平台兼容性

uni-app(5.04)

颜色选择器 layne-color-picker

颜色选择器 layne-color-picker，配置简单支持透明度。 配置简单，支持透明度，支持H5、vue2、vue3、android、ios。 颜色选择器 layne-color-picker，配置简单 透明度

API

Props

Event

字段说明

• presetColors 预置颜色

  [
      '#FF3B30', // 鲜艳红
      '#FF9500', // 活力橙
      '#FFCC00', // 明亮黄
      '#4CD964', // 清新绿
      '#5AC8FA', // 天空蓝
      '#007AFF', // 科技蓝
      '#5856D6', // 靛青色
      '#FF2D55', // 玫红
      '#A2845E', // 金棕色
      '#8E8E93', // 中灰色
      '#E6E6E6', // 浅银灰
      '#333333', // 深灰色
      '#FFFFFF', // 纯白
      '#000000', // 纯黑
      '#FF6B6B', // 珊瑚红
      '#4ECDC4', // 蒂芙尼蓝
      '#45B7D1', // 海洋蓝
      '#96CEB4'  // 鼠尾草绿
  ]

  • 必要数据： color：当前颜色。 show：是否打开颜色选择器。

使用说明

此为vue2示例，vue3请使用vue3方式

<!-- 触发按钮 -->
<button @click="showPicker = true">选择颜色</button>

<!-- presetColors 绑定预置颜色，color 绑定当前颜色，show 控制显示 -->
<layne-color-picker 
    :presetColors="presetColors"
    :color="myColor" 
    :show="showPicker" 
    @closePicker="closePicker"
    @confirmPicker="confirmPicker"
/>

<view :style="{ backgroundColor: myColor }">
    选中的颜色是：{{ myColor }}
</view>

showPicker: false
myColor: '#000000' // 初始颜色
presetColors: [
        '#FF3B30', // 鲜艳红
        '#FF9500', // 活力橙
        '#FFCC00', // 明亮黄
        '#4CD964', // 清新绿
        '#5AC8FA', // 天空蓝
        '#007AFF', // 科技蓝
        '#5856D6', // 靛青色
        '#FF2D55', // 玫红
        '#A2845E', // 金棕色
        '#8E8E93', // 中灰色
        '#E6E6E6', // 浅银灰
        '#333333', // 深灰色
        '#FFFFFF', // 纯白
        '#000000', // 纯黑
        '#FF6B6B', // 珊瑚红
        '#4ECDC4', // 蒂芙尼蓝
        '#45B7D1', // 海洋蓝
        '#96CEB4'  // 鼠尾草绿
]

// 关闭颜色选择器
closePicker(e) { this.showPicker = e; }
// 更新选择的颜色
confirmPicker(color) { console.log('Confirmed:', color); this.myColor = color; }