# 快速添加组件 ## 介绍 [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` 并留言 `加群`。