将"修改源码"改为更专业的"二次开发",体现技术深度

【技术方案决策背景】

在最近XX业务迭代中,为满足产品提出的交互优化需求(禁用el-dialog/el-drawer组件点击Modal遮罩层自动关闭功能),针对当前已趋于稳定的项目架构,经过技术方案比选,提出两种实现路径:

方案对比:

1. 全局属性覆写方案(渐进式改造)
  • 实现方式:通过全局检索组件标签,追加close-on-click-modal=false属性
  • 优势:修改范围可控
  • 劣势:存在组件覆盖不全风险,新增组件需人工维护
2. 源码层定制化方案(底层能力增强)
  • 实现方式:基于Element-Plus源码库修改默认配置,生成定制化补丁
  • 优势:彻底解决默认值问题,降低后续维护成本
  • 技术价值:深入理解框架设计,建立二次开发能力

【方案选择与技术价值】

最终采用源码层改造方案,主要基于以下技术考量:

  1. 框架研究价值:通过源码追溯组件默认配置的加载机制(涉及props继承链、默认值注入策略等核心逻辑)
  2. 工程化实践:掌握Monorepo架构下组件库的构建流程,建立补丁生成与版本管理规范
  3. 技术沉淀:通过逆向分析Element-Plus的组件通信设计,为后续定制化需求提供技术储备
  4. 工程实践亮点:在技术方案文档中完整记录源码调试、补丁生成、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 -> srcApp.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 element-plus@2.9.8

Step5

接下来在刚才node_modules --> .pnpm_patches --> element-plus@2.9.8 --> es --> components --> dialog -- > src --> dialog.mjs 文件修改为false即可

Step6

现在执行刚才pnpm patch返回的那条命令执行一下显示下图就大功告成啦~

bash 复制代码
# commit路径
pnpm patch-commit "E:\xxx\xxx\node_modules\.pnpm_patches\element-plus@2.9.8"

男人眼中的黑丝(Curosr编辑器白嫖交流+qun备注cursor)

相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
DeepSeek-大模型系统教程2 小时前
推荐 7 个本周 yyds 的 GitHub 项目。
人工智能·ai·语言模型·大模型·github·ai大模型·大模型学习
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈