【技术方案决策背景】
在最近XX业务迭代中，为满足产品提出的交互优化需求（禁用el-dialog/el-drawer组件点击Modal遮罩层自动关闭功能），针对当前已趋于稳定的项目架构，经过技术方案比选，提出两种实现路径：
方案对比：
1. 全局属性覆写方案（渐进式改造）
- 实现方式：通过全局检索组件标签，追加close-on-click-modal=false属性
- 优势：修改范围可控
- 劣势：存在组件覆盖不全风险，新增组件需人工维护
2. 源码层定制化方案（底层能力增强）
- 实现方式：基于Element-Plus源码库修改默认配置，生成定制化补丁
- 优势：彻底解决默认值问题，降低后续维护成本
- 技术价值：深入理解框架设计，建立二次开发能力
【方案选择与技术价值】
最终采用源码层改造方案，主要基于以下技术考量：
- 框架研究价值：通过源码追溯组件默认配置的加载机制（涉及props继承链、默认值注入策略等核心逻辑）
- 工程化实践：掌握Monorepo架构下组件库的构建流程，建立补丁生成与版本管理规范
- 技术沉淀：通过逆向分析Element-Plus的组件通信设计，为后续定制化需求提供技术储备
- 工程实践亮点：在技术方案文档中完整记录源码调试、补丁生成、CI/CD集成等关键过程
实现方案及踩坑日记
Steps1
这里建议大家通过加速器克隆element-plus源码（因为项目很大，消耗时间较长）
ini
浅层克隆法
**实现原理**：`--depth=1`仅克隆最新提交，跳过历史记录
# 仅获取最新代码（示例）
$ git clone --depth=1 https://github.com/example/large-repo.git
# 后续需要完整历史时可执行：
$ git fetch --unshallow克隆下来之后通过pnpm install下载依赖，npm run dev启动项目
Steps2
在play --- > src ---> App.vue文件中书写要调试代码
可能会遇到的问题：
play -> src 下 App.vue 文件不存在，那就是因为没有pnpm install下载好依赖，重新下载依赖即可
Steps3
在packages --- > components ---> dialog ---> src ---> dialog.ts文件中可以看到props修改默认遮罩属性为false即可，大家可以根据自己不同的业务修改不同组件中的源码，有兴趣的小伙伴们，可以多看看源码，可以提升很多~
Steps4
此时，el-dialog中点击遮罩默认关闭属性已经修改完成（调试组件库，调试完成之后下一步就可以实操了~）
因el-drawer引用的是el-dialog中的props所有改掉el-dialog中的props即可生效
Steps4
现在修改源码工作已经完成，接下来打包补丁，在当前要修改的根目录中打开bash/终端修改为bash
bash
# 2.9.8是你当前element-plus的版本
pnpm patch [email protected]
Step5
接下来在刚才node_modules --> .pnpm_patches --> [email protected] --> es --> components --> dialog -- > src --> dialog.mjs 文件修改为false即可
Step6
现在执行刚才pnpm patch返回的那条命令执行一下显示下图就大功告成啦~
bash
# commit路径
pnpm patch-commit "E:\xxx\xxx\node_modules\.pnpm_patches\[email protected]"
男人眼中的黑丝（Curosr编辑器白嫖交流+qun备注cursor）
