# @cyhnkckali/vue3-color-picker 中文文档
规范地址：https://npmcn.com/package/%40cyhnkckali/vue3-color-picker/
版本：2\.1\.7
npm 元数据更新时间：2026-02-23T14:34:38.288Z
中文译文更新时间：2026-11-11T07:02:21.067Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40cyhnkckali/vue3-color-picker
原文对照：https://npmcn.com/package/%40cyhnkckali/vue3-color-picker/?lang=original
项目主页：https://cyhnkckali.github.io/vue3-color-picker/
源码仓库：https://github.com/cyhnkckali/vue3-color-picker
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：237 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.3\.8
- 首次发布：2023-11-29T13:40:35.545Z
- 最新版本发布：2026-02-23T14:34:38.177Z
- 近 30 天下载量：48286（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：47（近 12 个月 2 个）
## 中文简介
取色器组件库
## 安装
```sh
npm install @cyhnkckali/vue3-color-picker
```
也可以使用：`pnpm add @cyhnkckali/vue3-color-picker`、`yarn add @cyhnkckali/vue3-color-picker`、`bun add @cyhnkckali/vue3-color-picker`
## README
# Vue 3 颜色拾取器
Vue 3 的色彩选择组件 。 快速且有小包大小. 渐入一体! 无依无靠! 完全定制!
#### 带有2.0版本的特性
- 立即改变模式的能力
- 更改颜色列表中的值
- 删除颜色列表中的值
- 新样式变量
- 新设计
不要忘记明星的动机:
试试吧 [现场直播](https://cyhnkckali.github.io/vue3-color-picker/)
下载1.1.9继续旧版本!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
## 安装
#### 国家防范机制安装
```
npm i @cyhnkckali/vue3-color-picker
```
#### Yarn 安装
```
yarn add @cyhnkckali/vue3-color-picker
```
#### 导入
##### 导入要使用的地方
```
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
```
#### 将样式文件导入您的主机 。 js 文件
```
import '@cyhnkckali/vue3-color-picker/dist/style.css'
```
## 使用/实例
```javascript
```
## 选项
| 参数 | 类型 | 说明 |
| :-- | :-- | :-- |
| `v-model` | `string` | 默认 `''` |
| `mode` | `string` | `solid` 或者说 `gradient` 默认 `gradient` |
| `theme` | `string` | `light` 或者说 `dark` 默认 `light` |
| `type` | `string` | 返回颜色值类型 `HEX8` `RGBA` `RGB` `HEX` 默认 `HEX8` |
| `inputType` | `string` | 颜色值输入类型 `RGB` `HSL` `HSV` `CMYK` 默认 `RGB` |
| `disabled` | `boolean` | 默认 `false` |
| `local` | `object` | 默认 `{ angle: '', positionX: '', positionY: '', solid: '', gradient: '', linear: '', radial: '', colorPalette: '', btnSaveLabel:'Save', btnCancelLabel:'Cancel' }` |
| `colorListCount` | `number` | 确定颜色列表默认值中要保留多少颜色 `18` |
| `showColorList` | `boolean` | 默认 `true` |
| `showEyeDrop` | `boolean` | 默认 `true` 只支持 Chrome 和边缘 |
| `showAlpha` | `boolean` | 默认 `true` |
| `showInputMenu` | `boolean` | 默认 `true` |
| `showInputSet` | `boolean` | 默认 `true` |
| `showPickerMode` | `boolean` | 默认 `true` |
| `iconClasses` | `object` | 默认 `{ ruler: '', eyeDroper: '', arrowDown: '', save: '', delete: '' }` |
| `gradientMode` | `linear` 或者说 `radial` | 默认 `linear` 设定拾取器启动时的初始梯度模式 |
| `showButtons` | `boolean` | 默认 `true` |
## 输出
| 参数 | 类型 | 说明 |
| :-- | :-- | :-- |
| `update:model-value` | `event` | 返回时 `'color value'` |
| `onSave` | `event` | 返回时 `'color value'` |
| `onCancel` | `event` | 返回时 `'color value'` |
## CSS 颜色变量
| 变量名称 | 十六进制 | 暗黑十六进制 |
| :-- | :-- | :-- |
| \--cp-小学 |  #5983fc (英语) |  #5983fc (英语) |
| \-- cp 集装箱 -- bg |  {\\FN方正黑体简体\\FS18\\B1\\BORD1\\SHAD1\\3CH2F2F2F}FFFFF: |  212529号 |
| \--cp - 选择颜色 |  #2c5ae6af (英语) |  #2c5ae6af (英语) |
| \-- cp- 远程边界 |  #f7f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 #f7f7 #f7f7 #f7f7 #f7f7 #f7ff7 #f7f7 #f7fff7 #f7fff7 #f7fffff7 #f7fff7ffff7 #f7f7fffffffffffffffffffffffffffffffffffffffffffffffffff |  #f7f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 # #f7f7 #f7f7 #f7f7 #f7f7 #f7f7 #f7ff7 #f7f7 #f7fff7 #f7fff7 #f7fffff7 #f7fff7ffff7 #f7f7fffffffffffffffffffffffffffffffffffffffffffffffffff |
| \-- cp- rang- 阴影 |  # 4c86f3 # (中文(简体) ) |  # 4c86f3 # (中文(简体) ) |
| \--cp-容器-阴影 |  #5858581 (英语) |  #2b262696 (英语) |
| \--cp-gray-100 (英语) |  #f9f9f9 (英语) |  #1b1c22 (英语) |
| \--cp-gray-200 (英语) |  #f1f1f4 (中文(简体) ) |  #26272f (英语) |
| \--cp-gray-300 (英语) |  #dbdfe9 (英语) |  363843号 |
| \--cp-gray-400 (英语) |  #c4卡达 |  464852号 |
| \--cp-gray-500 (英语) |  #99a1b7 (中文(简体) ) |  #636674 (英语) |
| \--cp-gray-600 (英语) |  #78829d (英语) |  #808290 (英语) |
| \--cp-gray-700 (英语) |  #4b5675 (英语) |  {\\fn华文楷体\\fs16\\1che0e0e0}9a9卡 |
| \--cp-gray-800 (英语) |  #252f4a (中文(简体) ) |  #b5b7c8 (英语) |
| \--cp-gray-900 (英语) |  #071437 (英语) |  #f5f5f5 (中文(简体) ) |
| \-- cp- 反向黑暗 |  #57575723 (英语) |  #6b6b6b56 (英语) |
| \--cp-反向-白色 |  #9292920d (英语) |  92929256号 |
## 路线图
- 要添加的部件类型
## 常见问题
### @cyhnkckali/vue3-color-picker 是什么？
取色器组件库
### 如何安装 @cyhnkckali/vue3-color-picker？
在项目目录运行 npm install @cyhnkckali/vue3-color-picker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.3\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @cyhnkckali/vue3-color-picker 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @cyhnkckali/vue3-color-picker 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @cyhnkckali/vue3-color-picker 可以商用吗？
@cyhnkckali/vue3-color-picker 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。
### @cyhnkckali/vue3-color-picker 的下载量有多少？
根据 npm 官方下载统计，@cyhnkckali/vue3-color-picker 在 2026/10/11 – 2026/11/09 这 30 天内被下载 48,286 次，日均约 1,610 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @cyhnkckali/vue3-color-picker 还在维护吗？
最新版本 2\.1\.7 发布于 2026/02/23（8 个月前）；至今共发布 47 个版本，其中过去 12 个月发布了 2 个；首次发布于 2023/11/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。