color-picker

KO | EN

gitlite — search

#javascript #react #ai #typescript #llm #android #deep-learning #docker #nodejs #windows #cli #vue #pytorch #security

(★ 13)

微信小程序拾色器（颜色选择器或取色器）组件，快速获取颜色值，小程序原生语法，方便集成。

color-picker Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# color-picker

微信小程序拾色器（颜色选择器或取色器）组件，快速获取颜色值，小程序原生语法，方便集成。

项目仓库地址：

[github](https://github.com/vual/color-picker)

[gitee](https://gitee.com/vual/color-picker)

# 功能介绍
    
    1.点击颜色盒子，直接选择颜色。
    2.调节颜色条。
    3.调节透明度。
    4.调节RGB值。
    5.直接点击备选颜色。

# 使用方式

1.json里引入控件：

"usingComponents": {
        "color-picker": "/components/color-picker/color-picker"
    }

2.定义Page：
    
    Page({
        data: {
            colorPickerShow: false,
            defaultColor: {
                r: 0,
                g: 0,
                b: 255,
                a: 1
            },
            rgba: {
                r: 0,
                g: 188,
                b: 212,
                a: 1
            }
        },
    
        onLoad() {
        
        },
    
        openPicker() {
            this.setData({
                colorPickerShow: true,
            })
        },
        
        colorConfirm(event) {
            this.setData({
                rgba: event.detail.rgba
            })
        }
    })

3.编写页面：
    
    <view class="color-button">
        <button bind:tap="openPicker" style="background-color: rgba({{rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a}})">选择颜色</button>
        <color-picker show="{{colorPickerShow}}" defaultColor="{{defaultColor}}" bind:confirm="colorConfirm"></color-picker>
    </view>

# 演示
  
   ![image](https://raw.githubusercontent.com/vual/color-picker/main/images/demo.gif)

color-picker

color-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

color-picker

color-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README