更新记录

0.0.4(2022-01-22)

  1. 提供了Vue3的支持

0.0.3(2022-01-22)

  1. 优化界面适应小设备的能力,使用微信开发者测试过iPhone5,iPhone6等小设备
  2. 调整了预先颜色显示逻辑,当小设备时将隐藏预先颜色

0.0.2(2022-01-21)

  1. 调整了界面布局,能适应不同设备尺寸
  2. 实现了手动输入颜色
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

wxy-color-picker 介绍

项目白板需要取色,在插件市场找到了自认为比较适合的t-color-picker 颜色选择器,不过是2019年作品,再也没有更新了,于是我自己在此基础上改进为uni-module版,并添加了黑白两种预选颜色,以后完成作者未完成部分

下面是该插件原作者说明

此组件基本全平台支持。(支付宝,百度,头条小程序理论上都支持,但是没有很细致的测试这几个平台)

功能亮点

  • 全颜色选择,支持色相选择,透明度选择
  • rgba 颜色显示 ,二进制颜色显示
  • 可定义备选色
  • 自定义默认颜色
  • 支持手动输入

未实现

  • 颜色添加收藏 (可在备选色的基础上扩展,不会涉及到基本逻辑的改动)
  • 已经实现 HSLA 颜色模式 ,但未做展示,可自行扩展

调用方式

<template>
    <view>
        <button @click="open">打开颜色选择器</button>
        <wxy-color-picker ref="colorPicker" :color="color" @confirm="confirm"></wxy-color-picker>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                color: {r: 255,g: 0,b: 0,a: 0.6}
            };
        },
        methods: {
            open(item) {
                // 打开颜色选择器
                this.$refs.colorPicker.open();
            },
            confirm(e) {
                console.log('颜色选择器返回值:'+ e)
            }
        }
    };
</script>

属性说明

属性名 类型 默认值 说明
color Object {r: 0,g: 0,b: 0,a: 1} 颜色选择器初始颜色
spare-color Object 备选色,格式为:[ {r: 0,g: 0,b: 0,a: 1}]
confirm function 确认选择函数 ,返回值:event = {rgba:{r: 0,g: 0,b: 0,a: 1},hex:'#000000'}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问