# 快速添加组件

## 介绍

[Cocos Creator 编辑器扩展]

**选中若干个节点，按下快捷键打开搜索栏，输入组件名找到目标组件，即可快速将组件添加到节点上。**



## 开源

本扩展项目完全开源，仓库地址：[https://gitee.com/ifaswind/ccc-quick-add-component](https://gitee.com/ifaswind/ccc-quick-add-component)

如果你觉得这个项目还不错，请不要忘记点 [![star](https://gitee.com/ifaswind/ccc-quick-add-component/badge/star.svg?theme=dark)](https://gitee.com/ifaswind/ccc-quick-add-component/stargazers)！

*如有使用上的问题，可以在 Gitee 仓库中提 Issue 或者添加我的微信 `im_chenpipi` 并留言。*



## 截图

![screenshot-1](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-1.png)

![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-2.png)

![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-3.png)

![search-bar](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/search-bar.png)

![setting-panel](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/setting-panel.png) 



## 运行环境

平台：Windows、macOS

引擎：Cocos Creator 2.x



## 下载 & 安装

### 在扩展商店中安装

本扩展已上架 Cocos 商店，点击 Cocos Creator 编辑器顶部菜单栏中的 *扩展 -> 扩展商店* 即可打开扩展商店。

在上方搜索栏中输入“**快速添加组件**”并搜索就可以找到本插件，点进去直接安装即可（建议安装到全局）。

![cocos-store](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/cocos-store.png)

*快速添加组件: [https://store.cocos.com/app/detail/2712](https://store.cocos.com/app/detail/2712)*



### 自行下载安装

在[此处](https://gitee.com/ifaswind/ccc-quick-add-component/releases)或仓库发行版处下载最新的扩展压缩包。

下载完成后将压缩包解压：

- Windows：解压到 `C:\Users\${你的用户名}\.CocosCreator\packages\` 目录下
- macOS：解压到 `~/.CocosCreator/packages/` 目录下

以 Windows 为例，扩展的 `main.js` 文件在我的电脑上的完整目录为 `C:\Users\Shaun\.CocosCreator\packages\ccc-quick-add-component\main.js`。



## 使用说明

### 快速搜索并添加组件

1. 在层级管理器中选中一个或多个节点。

2. 按下快捷键（默认为 `F3`）或者点击编辑器顶部菜单栏中的 *扩展 -> 快速添加组件 -> 搜索* 即可打开搜索栏。

3. 在搜索栏中输入关键词就可以得到符合条件的结果列表。

4. 滑动鼠标滚轮或者按下键盘的上下箭头键可以滚动结果列表。

5. 找到目标组件后，鼠标点击或者按下回车键即可快速添加组件到已选择的节点上。

另外，点击搜索栏外的任意位置或者按下 Esc 按键即可关闭搜索栏。



### 设置

点击编辑器顶部菜单栏中的 *扩展 -> 快速添加组件 -> 设置* 即可打开扩展的设置面板。

在设置面板中你可以更换打开搜索栏的快捷键，也可以自定义一个自己喜欢的快捷键。

不过需要注意的是，并非所有的按键都可以使用，因为有些快捷键已被系统或 Cocos Creator 占用。

*键盘快捷键参考：[https://www.electronjs.org/docs/api/accelerator](https://www.electronjs.org/docs/api/accelerator)*

🥳 Enjoy!



---



# 公众号

## 菜鸟小栈

😺 我是陈皮皮，一个还在不断学习的游戏开发者，一个热爱分享的 Cocos Star Writer。

🎨 这是我的个人公众号，专注但不仅限于游戏开发和前端技术分享。

💖 每一篇原创都非常用心，你的关注就是我原创的动力！

> Input and output.

![](https://gitee.com/ifaswind/image-storage/raw/master/weixin/official-account.png)



## 游戏开发交流群

皮皮创建了一个**游戏开发交流群**，供小伙伴们交流开发经验、问题求助等。

感兴趣的小伙伴可以添加我微信 `im_chenpipi` 并留言 `加群`。