# @caohenghu/vue-colorpicker 中文文档

规范地址：https://npmcn.com/package/%40caohenghu/vue-colorpicker/

版本：1\.2\.4
npm 元数据更新时间：2022-04-04T21:43:53.306Z
中文译文更新时间：2026-11-09T01:35:29.819Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40caohenghu/vue-colorpicker
原文对照：https://npmcn.com/package/%40caohenghu/vue-colorpicker/?lang=original
项目主页：https://github.com/caohenghu/vue-colorpicker#readme
源码仓库：https://github.com/caohenghu/vue-colorpicker

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：78.7 kB，15 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2019-01-14T02:07:58.192Z
- 最新版本发布：2020-02-27T04:55:03.042Z
- 近 30 天下载量：7259（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

Vue 组件的取色器

## 安装

```sh
npm install @caohenghu/vue-colorpicker
```

也可以使用：`pnpm add @caohenghu/vue-colorpicker`、`yarn add @caohenghu/vue-colorpicker`、`bun add @caohenghu/vue-colorpicker`

## README

# 紫色选手

## [现场直播](https://caohenghu.github.io/vue-colorpicker/)

![preview-dark](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-dark.jpg) ![preview-light](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-light.jpg)

## 安装

```bash
$ yarn add @caohenghu/vue-colorpicker
```

## 示例

```html
<template>
    <div :style="{background: color}">
        <color-picker
            theme="light"
            :color="color"
            :sucker-hide="false"
            :sucker-canvas="suckerCanvas"
            :sucker-area="suckerArea"
            @changeColor="changeColor"
            @openSucker="openSucker"
        />
    </div>
</template>

<script>
    import colorPicker from '@caohenghu/vue-colorpicker'

    export default {
        components: {
            colorPicker
        },
        data() {
            return {
                color: '#59c7f9',
                suckerCanvas: null,
                suckerArea: [],
                isSucking: false
            }
        },
        methods: {
            changeColor(color) {
                const { r, g, b, a } = color.rgba
                this.color = `rgba(${r}, ${g}, ${b}, ${a})`
            },
            openSucker(isOpen) {
                if (isOpen) {
                    // ... canvas be created
                    // this.suckerCanvas = canvas
                    // this.suckerArea = [x1, y1, x2, y2]
                } else {
                    // this.suckerCanvas && this.suckerCanvas.remove
                }
            }
        }
    }
</script>
```

## 选项

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 主题 | 字符串 | `dark` | `dark` 或者说 `light` |
| 颜色 | 字符串 | `#000000` | `rgba` 或者说 `hex` |
| 颜色默认 | 阵列 | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | 喜欢 `['#ff00ff', '#0f0f0f', ...]` |
| 颜色历史键 | 字符串 | `vue-colorpicker-history` |  |
| 躲起来 | 布尔 | `true` | `true` 或者说 `false` |
| 烂透了 | HTML 坎瓦斯元素 | `null` | 喜欢 `document.createElement('canvas')` |
| 吸盘区域 | 阵列 | `[]` | 喜欢 `[x1, y1, x2, y2]` |

> `color` 是单向数据流,所以你不能使用 `v-model`为什么? 因为你会听 `changeColor` 事件做更多的事情, 所以我认为它没有必要在这里.

## 活动

| 名称 | 类型 | 参数 | 说明 |
| --- | --- | --- | --- |
| 更改颜色 | 函数 | 颜色 | `{ rgba: {}, hsv: {}, hex: ''}` |
| 打开鼠标 | 函数 | 打开 | `true` 或者说 `false` |

> 如果你想用吸盘,那么 `openSucker`, (中文(简体) ), `sucker-hide`, (中文(简体) ), `sucker-canvas`, (中文(简体) ), `sucker-area` 这是必要的。 当单击吸管按钮时,可以再次单击或按下 `esc` 离开.

## 常见问题

### @caohenghu/vue-colorpicker 是什么？

Vue 组件的取色器

### 如何安装 @caohenghu/vue-colorpicker？

在项目目录运行 npm install @caohenghu/vue-colorpicker，或使用 pnpm add / yarn add / bun add。

### @caohenghu/vue-colorpicker 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/caohenghu\_\_vue-colorpicker 是否存在。

### @caohenghu/vue-colorpicker 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @caohenghu/vue-colorpicker 可以商用吗？

@caohenghu/vue-colorpicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @caohenghu/vue-colorpicker 的下载量有多少？

根据 npm 官方下载统计，@caohenghu/vue-colorpicker 在 2026/10/09 – 2026/11/07 这 30 天内被下载 7,259 次，日均约 242 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @caohenghu/vue-colorpicker 还在维护吗？

最新版本 1\.2\.4 发布于 2020/02/27（6 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/01/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。