实现Element Plus中Color-Pick组件扩展滴管吸取功能

文
章
目
录

• 一、执行pnpm patch命令
• 二、找到目标文件进行修改
• 三、提交保存并生成patch文件
• 四、最终效果

使用Element Plus的color-pick组件时，有时会遇到需要额外功能的情况,本次项目的目标需求就是在color-pick组件中添加常用颜色列表以及滴管吸取功能。由于组件内部没有提供相应的插槽，且项目对二次开发的要求不算多，我们决定借助patch来实现这些功能。本文主要记录使用pnpm的patch进行操作的过程。

一、执行pnpm patch命令

首先，在项目的命令行中执行：

pnpm patch element-plus

执行这条命令后，会生成一个特定的目录结构，如下：这个目录结构包含了Element Plus相关的文件，我们后续的修改操作主要就在这些文件里进行。

二、找到目标文件进行修改

项目使用的是Vite构建工具，我们只需要修改es目录下的文件。具体路径为node_modules/.pnpm_patches/element-plus@2.8.4/es/components/color-picker。在这个目录中，找到color-picker2.mjs文件，这个文件就是我们要修改的核心文件。

打开color-picker2.mjs文件，我们发现其中定义了color-pick组件的相关逻辑。为了实现添加常用颜色列表和滴管吸取功能，我们需要在dropdown的children中添加一个默认的插槽（当然，也可以自定义名称）。添加的代码如下：

renderSlot(_ctx.$slots, \"default\", {color: unref(color)})

这段代码的作用是在组件中插入一个插槽，通过这个插槽，我们就可以在外部自定义插入常用颜色列表和滴管吸取功能的相关内容。

三、提交保存并生成patch文件

完成文件修改后，需要将修改的内容提交保存，生成patch文件。在命令行中执行：

pnpm patch-commit

执行这条命令后，会生成类似下面的patch文件内容：这个patch文件记录了我们对color-picker2.mjs文件的修改，之后在项目中使用这个patch文件，就可以应用我们的修改内容，实现color-pick组件的功能扩展。

四、最终效果

经过上述一系列操作后，在项目中使用color-pick组件时，就可以看到添加了常用颜色列表以及滴管吸取功能（这里由于原文章未详细描述最终效果展示形式，实际使用时可以根据自定义插槽插入的内容看到对应的功能效果）。

通过这次实践，我们掌握了利用pnpm的patch功能对Element Plus组件进行扩展的方法，希望能为大家在类似的开发场景中提供一些参考和帮助。