更新记录

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

首次发布

平台兼容性

uni-app(4.52)

zero-color-picker

一个适用于 uni-app 的颜色选择器组件，支持 HEX、RGB、HSL 输入切换，支持透明度、预设色以及底部弹窗选择。

1. 插件说明

仅测试于 vue2、vue3、微信小程序，其他平台请自行测试。

组件包含两个部分：

• zero-color-picker：内嵌式颜色选择器
• zero-color-picker-popup：基于 uni-popup 的底部弹窗颜色选择器

符合 easycom 组件模式，使用 uni_modules 导入后可直接使用。

2. 基础用法

<template>
  <view class="container">
    <view class="card">
      <view class="title">基础用法</view>
      <zero-color-picker
        v-model="color"
        :showAlpha="true"
        :showPresets="true"
        outputFormat="auto"
        @change="handleChange"
      ></zero-color-picker>
    </view>

    <view class="result">当前颜色：{{ color }}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        color: "#1677FF",
      };
    },
    methods: {
      handleChange(color) {
        console.log("当前颜色：", color);
      },
    },
  };
</script>

<style>
  .container {
    padding: 24rpx;
  }

  .card {
    background: #ffffff;
    border-radius: 24rpx;
    overflow: hidden;
  }

  .title {
    font-size: 30rpx;
    font-weight: 600;
    padding: 24rpx 24rpx 0;
  }

  .result {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #475569;
  }
</style>

3. 弹窗用法

<template>
  <view class="container">
    <view class="picker-row">
      <text>选择主题色</text>
      <view class="picker-right">
        <text>{{ popupColor }}</text>
        <view
          class="color-preview"
          :style="{ backgroundColor: popupColor }"
          @click="openPicker"
        ></view>
      </view>
    </view>

    <zero-color-picker-popup
      ref="pickerRef"
      v-model="popupColor"
      title="选择颜色"
      :showAlpha="true"
      outputFormat="auto"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    ></zero-color-picker-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        popupColor: "#FF4D4F",
      };
    },
    methods: {
      openPicker() {
        this.$refs.pickerRef.open();
      },
      handleConfirm(color) {
        this.popupColor = color;
        console.log("确认颜色：", color);
      },
      handleCancel(color) {
        console.log("取消时颜色：", color);
      },
    },
  };
</script>

<style>
  .container {
    padding: 24rpx;
  }

  .picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .picker-right {
    display: flex;
    align-items: center;
  }

  .color-preview {
    width: 56rpx;
    height: 56rpx;
    border-radius: 12rpx;
    margin-left: 16rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.08);
  }
</style>

4. zero-color-picker 参数说明

5. zero-color-picker 事件说明

6. zero-color-picker-popup 参数说明

zero-color-picker-popup 继承了 zero-color-picker 的全部参数，另外新增以下参数：

7. zero-color-picker-popup 事件说明

8. zero-color-picker-popup refs 扩展

// 打开弹窗
this.$refs.pickerRef.open();

// 关闭弹窗
this.$refs.pickerRef.close();

// 获取当前颜色
this.$refs.pickerRef.getColor();

// 手动设置颜色
this.$refs.pickerRef.setColor("#00B578");

9. 输出规则说明

• outputFormat="auto"： 组件会在无透明度时输出 #RRGGBB，有透明度且小于 1 时输出 rgba(...)
• outputFormat="hex"： 无透明度时输出 #RRGGBB，开启透明度时输出 #RRGGBBAA
• outputFormat="rgb"：始终输出 rgb(r, g, b)
• outputFormat="rgba"：始终输出 rgba(r, g, b, a)

10. 输入格式说明

输入框支持以下格式：

• #1677FF
• #1677FFCC
• rgb(22, 119, 255)
• rgba(22, 119, 255, 0.8)
• hsl(215, 100%, 54%)
• hsla(215, 100%, 54%, 0.8)

切换到不同模式后，输入框会自动显示当前颜色对应的 HEX、RGB 或 HSL 文本。

插件预览：

小程序搜索：零技术

预览小程序不一定及时更新当前插件