更新记录
0.0.4(2022-01-22)
下载此版本
- 提供了Vue3的支持
0.0.3(2022-01-22)
下载此版本
- 优化界面适应小设备的能力,使用微信开发者测试过iPhone5,iPhone6等小设备
- 调整了预先颜色显示逻辑,当小设备时将隐藏预先颜色
0.0.2(2022-01-21)
下载此版本
- 调整了界面布局,能适应不同设备尺寸
- 实现了手动输入颜色
查看更多
平台兼容性
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'} |