问题阐述
项目中使用Element Plus的Drawer组件时，在header插槽中自定义关闭按钮，该按钮基于header进行绝对定位，悬浮于header左上角，如下图所示。在本次需求迭代之前，一直是可以正常显示的。但是这次新需求迭代后，发现该按钮无法显示。
排查步骤
- 按钮不显示原因，通过检查页面元素可知，是el-drawer__header作了overflow: hidden处理；
- 检查是否是新需求迭代影响到原来的样式布局,经过排查，本次迭代并没有涉及drawer样式的相关改动;
- 通过第一步的检查元素发现，该样式类并无添加任何前缀父类，如 .parent-className .el-drawer__header,说明是该组件本身的样式写法。
- 由第3步的分析，初步判断可能是由于组件库版本改动导致，因此调整排查方向。
- 切换项目分支至上一版本，查询package-lock.json中的element-plus版本为2.6.1，并查看对应的el-drawer__header的样式
- 切换项目至本次迭代分支，查询package-lock.json中的element-plus版本为2.11.5，并查看对应的el-drawer__header的样式
- 到这里，对比两个版本的样式就可以知道，此次的问题的原因是由于组件库版本升级，组件样式调整导致的。
为什么会出现这种情况
由于公司之前对git仓库服务商进行更换，且在上一个仓库服务商上，公司前端项目使用的是自有的npm制品库。但是迁移至新服务商后，放弃自有制品库的方案，采用直接npm下载依赖的方案，所以需要对原项目的package-lock.json进行删除，避免后续项目下载依赖下载不到。由于删除了package-lock以及。node_modules，项目在重新下载依赖时就会下载第三方依赖的最新版本，从而导致这次问题的发生。
小结
在公司项目的迭代上，package-lock.json对项目的稳定性和一致性是有帮助的，有了它，第三方库依赖版本会进行锁定，不会出现版本随意更新的问题。