更新记录

1.1.7（2025-01-11） 下载此版本

修复安卓端可能出现调色板不显示问题

1.1.6（2024-11-18） 下载此版本

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

1.1.5（2024-11-18） 下载此版本

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

平台兼容性

uni-app

其他

color-picker 颜色选择器

平台兼容

代码演示

基本用法

<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

事件 Events

事件说明

open()

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

特别说明

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