# we-color-picker

> A simple colorpicker component for wechat mini program☕

Latest version **1.1.9** (published 2019-01-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install we-color-picker
pnpm add we-color-picker
yarn add we-color-picker
bun add we-color-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2019-01-23 |
| First published | 2019-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 170.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 79 |
| Author | kirisakiaria |
| Maintainers | kirisakiaria |
| Keywords | wechat, color-picker, we-color-picker |

## Links

- npm: https://www.npmjs.com/package/we-color-picker
- Repository: https://github.com/KirisakiAria/we-color-picker
- Homepage: https://github.com/KirisakiAria/we-color-picker#readme
- Issues: https://github.com/KirisakiAria/we-color-picker/issues
- npm.io page: https://npm.io/package/we-color-picker

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.1.9 (latest) — 2019-01-23
- 1.1.8 — 2019-01-23
- 1.1.7 — 2019-01-04
- 1.1.6 — 2019-01-04
- 1.1.5 — 2019-01-03
- 1.1.4 — 2019-01-03
- 1.1.3 — 2019-01-03
- 1.1.2 — 2019-01-02
- 1.1.1 — 2019-01-02
- 1.1.0 — 2019-01-02
- 1.0.1 — 2019-01-02

## README

# we-color-picker

微信小程序拾色器（颜色选择器）组件☕

[![](https://img.shields.io/npm/v/we-color-picker.svg)](https://www.npmjs.com/package/we-color-picker/)
[![](https://img.shields.io/badge/小程序-@拾色器-green.svg)]()

## 查看DEMO

![小插件库](https://i.loli.net/2019/01/02/5c2c2f86cce15.jpg)

## 安装使用

### git

```
git clone https://github.com/KirisakiAria/we-color-picker.git
```

### npm

```
npm install we-color-picker --save
```

将项目中src目录下的全部文件拷贝到/components/color-picker中，在使用该组件的页面对应json文件中添加：
```json
"usingComponents": {
    "color-picker":"/components/color-picker/color-picker"
}
```
具体如何引入组件请参考[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html)

## 截图示例

仿照PS的色相立方体制作而成

![color-picker](https://i.loli.net/2019/01/02/5c2c2f86a2426.jpg)

## WXML

```HTML
<color-picker class="color-picker" colorData="{{colorData}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
```

## JS

```javascript
data: {
    colorData: {
        //基础色相，即左侧色盘右上顶点的颜色，由右侧的色相条控制
        hueData: {
            colorStopRed: 255,
            colorStopGreen: 0,
            colorStopBlue: 0,
        },
        //选择点的信息（左侧色盘上的小圆点，即你选择的颜色）
        pickerData: {
            x: 0, //选择点x轴偏移量
            y: 480, //选择点y轴偏移量
            red: 0, 
            green: 0,
            blue: 0, 
            hex: '#000000'
        },
        //色相控制条的位置
        barY: 0
    },
    rpxRatio: 1 //此值为你的屏幕CSS像素宽度/750，单位rpx实际像素
},
onLoad() {
    //设置rpxRatio
    wx.getSystemInfo({
        success(res) {
            _this.setData({
                rpxRatio: res.screenWidth / 750
            })
        }
    })
},
//选择改色时触发（在左侧色盘触摸或者切换右侧色相条）
onChangeColor(e) {
    //返回的信息在e.detail.colorData中
    this.setData({
      colorData: e.detail.colorData
    })
}
```

## 多个拾色器的情况

### WXML
```HTML
<color-picker data-id="0" class="color-picker" colorData="{{colorData0}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="1" class="color-picker" colorData="{{colorData1}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="2" class="color-picker" colorData="{{colorData2}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<!--More...-->
```

### JS
```javascript
data: {
    //设置多个参数即可
    colorData0: {
        //...
    },
    colorData1: {
        //...
    },
    colorData2: {
        //...
    },
    //More...
},
onChangeColor(e) {
    //这里我使用了dataset来存储标志，用来判断时哪个拾色器发生变化
    const index = e.target.dataset.id
    this.setData({
        [`colorData${index}`]: e.detail.colorData
    })
}
```

## 遇到问题?

[Issue](https://github.com/KirisakiAria/we-color-picker/issues)

wechat: thereshegoes 

email: xiaoli350791904@hotmail.com

---
_Source: https://npm.io/package/we-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._