更新记录

1.1.6(2024-11-18) 下载此版本

修复了H5端覆盖了交互反馈弹窗 uni.showToast 等的问题

1.1.5(2024-11-18) 下载此版本

修复在滑动选择颜色时页面会滑动的问题。

1.1.4(2024-11-17) 下载此版本

增加了 isCover 参数,用于覆盖微信小程序或者APP canvas、map 等组件。

查看更多

平台兼容性

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

color-picker 颜色选择器

平台兼容

H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ 小程序 App
未测 未测 未测 未测

代码演示

基本用法

<button @click="onClick" >开启颜色选择器</button>
<chj-color-picker ref="chj-color-picker" @change="subColor" @cancel="cancel" defaultColor="#000"></chj-color-picker>

Vue/Nvue

export default {
    data() {
        return {

        }
    },
    methods: {
        onClick() {
             this.$refs['chj-color-picker'].open();
        },
        subColor({hex,rgba}){
            console.log('确定');
            console.log(hex);
            console.log(rgba);
        },
        cancel(){
            console.log('取消');
        },
    }
}

API

Props

参数 说明 类型 默认值
title 标题 string 选择颜色
defaultColor 初始化颜色,格式为 HEX string #ff0000
isCover 如果是微信小程序或者APP出现被 canvas、map 等组件覆盖的情况请设置此参数为 true Boolean false

事件 Events

事件名 说明 回调参数
change 确定选择颜色 { hex, rgba }
cancel 取消选择颜色

事件说明

open()

打开颜色选择器,需要 chj-color-picker 中声明 ref 属性

特别说明

如果 isCover 参数设置为 true 那么输入颜色代码功能将无法使用。

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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