1.element-ui 组件库 button 源码分析
2.VXETable 中嵌套 ElementPlus Form 导致的表单校验问题分析与解决
3.手把手Element UI&Plus里Loading的极致封装！只需0.5行超简洁使用
4.element-plus源码与二次开发：package.json解析
5.Vue3中deep样式穿透的使用细节及源码解析
6.element-plus源码学习日志-03
element-ui 组件库 button 源码分析
团队将基于新的 UI 规范构建组件库，并需实现具备多种主题换肤能力的 button 组件。该组件需支持字体颜色、背景颜色、边框和禁用状态的cf领取vb源码调整，同时加入一种幽灵按钮类型。分析后，决定不在 element-ui 组件库上进行改造，以确保更好的维护性。因此，将参考 element-plus 的 css 自定义变量实现这一目标。
深入分析 element-ui 组件库中的 button 组件，我们关注到以下几个关键点：
首先，button 组件提供了丰富的属性，如尺寸（size）、类型（type）、朴素样式（plain）、圆角（round）、圆形（circle）、加载状态（loading）、禁用（disabled）、图标（icon）以及是否聚焦（autofocus）等，这些属性使按钮组件具有高度的定制性。
接下来，通过查看相关的文件路径，我们发现组件的逻辑主要集中在 button.vue 文件中。该文件定义了组件的属性和行为，而其样式逻辑则分散在多个文件中，包括 common/var.scss 和 theme-chalk/src/mixins/mixins.scss 等。
在 common/var.scss 文件中，定义了一系列公共变量，如主题颜色、字体颜色、字体大小等，桂林大字牌源码这些变量可以通过不同的主题配置实现组件库的换肤。例如，$--color-primary 变量用于定义主要主题颜色。
为了实现组件的动态换肤，mix 函数被用于将两种颜色按不同比例混合，从而生成新的颜色。例如，mix($--color-white, $--color-primary, %) 表示将白色与主要主题颜色按 % 和 % 的比例混合。
为了遵循 Element 的样式规范，组件库采用了 BEM（Block Element Modifier）命名法来管理样式。在 packages/theme-chalk/src/mixins/mixins.scss 文件中，定义了一系列的函数，如 b()、e() 和 m()，分别用于创建基础类、元素类以及修饰符类。
在 button.scss 组件样式文件中，我们看到组件库的样式被单独管理，通过 Gulp 打包工具。文件中，@include b(button) 函数用于定义 el-button 类样式，同时考虑了相邻按钮间的间距、按钮大小、内边距、字体大小和边框圆角等参数。当需要定义不同状态的样式时，使用 when 函数来实现，如 when(loading) 用于定义加载状态的样式。
针对不同的按钮类型（type）、伪类状态和朴素按钮，组件通过覆盖默认的颜色、背景颜色和边框颜色来实现定制化。颜色的浅化通过 mix 函数与白色混合实现。文本按钮、shared_ptr源码按钮组以及不同的按钮状态都遵循 BEM 规范，通过生成相应的类样式来定义。
综上所述，通过研究 element-ui 组件库的 button 组件源码，我们深入理解了其设计的巧妙之处。这一过程不仅帮助我们学习了组件库设计的最佳实践，也为我们构建具备高度定制性和维护性的组件库提供了宝贵的启示。
VXETable 中嵌套 ElementPlus Form 导致的表单校验问题分析与解决
在 Vue 3 业务中，当使用 VXETable 这个虚拟滚动表格组件并嵌套 ElementPlus 的 Form 表单时，可能会遇到表单校验不正确的问题。业务需求是在表格中嵌套表单，用于展示和修改数据。如果直接使用 ElementPlus 的 Table 组件一次性渲染全部元素，会导致需要绑定的事件数量过大（例如 * 6 = ），从而影响用户体验。为了解决这个问题，引入了虚拟滚动，以避免一次性渲染全部元素，从而实现性能优化。
ElementPlus 的 Table 组件不支持虚拟滚动，而 TableV2 组件仍在测试中，因此我们选择了 VXETable。然而，在实际使用过程中，发现表单校验并不如预期。点击“新增一行”按钮后，新添加的行能正常显示提示信息，但此时提交时无法通过校验。滚动页面后，再点击“提交”按钮，校验通过。这与期望表现不符，提示可能存在与虚拟滚动功能相关的问题。
通过控制变量和分析，json-lib 源码很容易确认问题根源在于 VXETable 的虚拟滚动功能。关闭虚拟滚动（通过设置 scroll-y 属性为 false）后，可以看到性能显著提升，且滚动后点击“提交”按钮仍无法通过校验。对比使用标准的 ElTable 组件时的情况，关闭虚拟滚动后性能更为明显，同样存在滚动后校验不通过的问题。这证实了问题与虚拟滚动功能直接相关。
虚拟滚动的核心目的是减少元素渲染，从而提高性能。开启虚拟滚动后，VXETable 只渲染了部分数据，而 ElementPlus 的表单校验机制似乎只针对渲染出的数据进行验证。这意味着，即使数据被添加或修改，如果它们没有被渲染出来，校验过程可能不会检测到这些变化，从而导致校验不通过。
通过深入分析 ElementPlus 的源码，我们发现 ElForm 实例上的 validate 方法直接返回了 validateField 方法的调用结果。validateField 方法进一步调用 doValidateField 方法获取验证结果。doValidateField 方法调用 obtainValidateFields 方法获取需要校验的字段。在 obtainValidateFields 方法中，通过 filterFields 方法过滤掉不需要校验的字段。最终，我们发现，当使用虚拟滚动时，props 参数传递给 filterFields 方法后变为一个空数组，导致所有字段被过滤掉，因此校验只针对渲染的数据。
解决这个问题的方法是手动跑一次校验，例如在新增数据后立即执行校验逻辑。为了优化用户体验，可以考虑在虚拟滚动实现中添加滚动到对应行的sqlite权威指南 源码逻辑，这样用户可以直接看到并理解错误信息。这不仅解决了校验不通过的问题，还提升了用户的互动体验。
在调试这个问题时，需要考虑多个因素，包括问题的抽象和简化、虚拟滚动原理的理解、关联元素与校验机制的关联以及优化用户体验的方法。解决这个问题的关键在于明确校验机制的工作原理，并在虚拟滚动的上下文中调整校验流程，确保所有数据都能被正确验证。
希望本文能为遇到类似问题的开发者提供一些启发和解决方案。
手把手Element UI&Plus里Loading的极致封装！只需0.5行超简洁使用
本文将带你探索如何通过极致封装来简化 Element UI&Plus 中的 Loading 组件使用，仅需0.5行代码即可实现。让我们一起学习如何优化业务页面中的代码结构，同时初步了解函数式编程的思路。
首先，Element-UI 和 Element-Plus 的 ElLoading 组件以其简洁易用的特点广受好评。接下来，我们将详细介绍如何将常见的长达行的代码块通过封装浓缩至0.5行，实现高效简洁的代码编写。
### 好用的 ElLoading
作为忠实用户，我已使用 Element-UI 和 Element-Plus 超过四年。它们的 ElLoading 组件确实配得上“简单易用”四个字。组件提供了两种用法：通过 v-loading 指令模式和 ElLoading.service 服务模式，后者尤其简化了代码逻辑，降低了页面复杂度，是业务开发中的利器。
### 最常见的使用方式
在日常业务开发中，我们经常需要使用 ElLoading 来展示加载状态。下图展示了一个常见的使用场景，代码长达6行，而且为了关闭加载状态，还需额外编写代码。这种做法不仅代码量大，还存在代码质量低、易出错等问题。
### 解决痛点
为了解决上述问题，我们可以通过封装 ElLoading 的功能，简化代码结构，提高代码可读性和维护性。接下来，我们将详细介绍如何解决代码过长、传参问题、异常处理等问题。
#### 封装痛点一：代码行数问题
针对代码行数过长的问题，我们可以采用函数式编程的思想，将相关逻辑封装到一个函数中，使得仅需0.5行代码即可实现所需功能。通过这种方式，不仅代码量显著减少，还能提高代码的复用性和可维护性。
#### 封装痛点二：默认与自定义传参
在封装过程中，我们需要考虑如何处理默认参数和自定义参数的传入。通过合理设计函数参数，可以实现灵活的参数配置，满足不同场景下的需求。
#### 封装痛点三：异常处理
为了保证代码的健壮性，我们需要在封装过程中考虑异常情况的处理，如处理异步方法的调用。通过引入 try-catch 语句，可以优雅地处理错误，确保程序的稳定运行。
### 实现效果
通过上述封装，我们实现了功能的简化，代码量从行减少至0.5行。同时，代码的可读性和可维护性得到显著提升。接下来，我们通过一个简单的示例演示如何使用封装后的 ElLoading 组件，并测试正常和异常情况下的表现。
### 源码提供
如果你对实现过程感兴趣，可以访问 GitHub 源码获取详细实现代码。源码链接如下：
github.com/zhangshichun...
通过本文的介绍，你不仅学会了如何通过极致封装简化 ElLoading 的使用，还了解了函数式编程的基本思想。希望这些知识能够帮助你提高代码质量，简化业务开发过程。无论是提升代码效率还是优化用户体验，极致封装都是一个值得探索的方向。
element-plus源码与二次开发：package.json解析
element-plus使用pnpm的workspace来搭建monorepo工程，允许在单一码仓库中集中管理大量互相依赖的包，同时确保发布时的独立性。pnpm-workspace.yaml文件在根目录声明内部可引用的包，执行pnpm i后，会在node_modules中创建软连接，无需手动link。
element-plus组件库将vue声明在peerDependencies中，避免在主项目安装组件库时额外安装vue。通过czg包定义规范，执行提交commit命令，确保遵循git规范。使用play子包进行简单的开发调试，引入本地组件库。通过gen命令快速创建新组件，使用模板生成组件基础模板。生成版本号文件命令用于在构建时提供rollup的banner参数，部署前更新版本号命令从环境变量获取TAG_VERSION和GIT_HEAD，写入到三个包的package.json中的version和gitHead字段。
清理dist目录命令使用pnpm run -r --parallel，以并行方式执行所有子包的命令，删除根目录下的dist目录，并执行所有子包的clean命令。构建文档和组件库的关键步骤包括使用rollup执行构建，通过@esbuild-kit/cjs-loader将esm和ts实时转换为CommonJS。生成类型声明文件和代码提示文件，复制源样式文件、编译为css、压缩，并输出到特定目录。启动组件库文档docs项目基于vitepress，构建组件文档，本地测试构建出的生产环境docs，生成多语言文件和CROWDIN_TOKEN。
执行各包的stub命令，使用unbuild打包工具，基于rollup，支持typescript，支持生成commonjs和esmodule和类型声明，无需额外配置。prepare Husky钩子脚本确保自动执行预定义命令，执行pnpm i后，自动执行pnpm stub，编译internal下的三个包入口。
通过上述详细解析，我们可以清晰了解到element-plus源码与二次开发中的核心功能与流程，从构建结构到构建流程，再到二次开发工具的运用，展示了其高效、灵活的特点。
Vue3中deep样式穿透的使用细节及源码解析
在Vue3的开发中，遇到第三方UI库（如element-plus）样式失效的问题时，可以借助:deep()方法实现样式穿透。首先理解一下 scoped属性的作用，它在组件style标签中设置，能确保样式隔离，避免组件间的样式污染。
例如，在element-plus的组件中，即使设置了宽度，由于 scoped属性导致的属性选择器不匹配，导致样式无法生效。这时，:deep()派上了用场。它将属性选择器前置，如:.el-inputwrapper::v-deep(.bar)会被转换为[data-v-xxxxxxx] .el-inputwrapper .bar，从而定位到UI库的选择器。
源码解析在core-main/packages/compiler-sfc/src/compileStyle.ts中，当遇到 scoped时，会使用postcss插件将CSS转换为抽象语法树，然后在processRule函数中，rewriteSelector()方法会处理:deep，将其转换为穿透选择器。
总结来说，当在Vue3中使用第三方UI库时，若样式设置无响应，可以考虑使用:deep()来解决样式穿透问题，以便于精确地控制和修改UI库的样式。
element-plus源码学习日志-
每日学习进阶，承上启下
昨日探讨了input组件的使用及编码准则，今日深入剖析element-plus源码，探索新知识。
文件定位至element-plus\packages\dialog\src\index.vue
先看模板代码片段，引入了teleport组件，这是新增的内置组件。
没有使用teleport时，元素作为app组件的子节点；而使用teleport后，元素变为app组件的同级节点，统一挂载于body下，to属性可指定具体id的DOM节点。
前端展示层级对最终显示结果影响重大。在Vue 2时代，使用Vue.extend创建新实例，挂载于app同级节点，解决全局弹层的层级问题。新自定义组件简化了开发流程，优化代码。
引入了Vue 3自定义指令，与之前版本有所调整，需进一步学习。
注意到Vue 3支持fragments，组件不再受限于单一节点，引入新问题，需深入研究官方文档，理解其用法。
JS代码段回顾了之前讨论过的基础知识，简要审视，复习要点。
今日总结：学习了Vue的新内置组件teleport，具备将包含的节点挂载至指定DOM节点的功能。并了解了新版本自定义指令的调整。
下一步规划：基于Jest为组件编写单元测试，学习Jest的基本用法、报告生成等操作，深入框架测试领域。
