qq_40147756的博客

经验 - element-plus 组件 collapse 折叠面板的手风琴效果，实现思路在实战中的应用

element-plus 的内部组件，很实用，可以完美实现高度折叠动画

对于一个前端开发团队来说，随着项目的规模越来越大，良好的代码规范越显得重要。绞尽脑汁的去想一个 class，还得和其他类似的 class 做区分。修改旧代码时，得去仔细确认每个 class 的作用，是修改、删除，还是添加一个新的 class 覆盖。协作开发时 class 命名的冲突。BEM 可以解决这些问题，让代码更容易阅读和控制，规范团队的代码风格。BEM 是一种CSS命名规范。由 B（block）模块，E（element）元素，M（modifier）修饰符组成。连接 element 用。

在组件库的设计中，最常见的全局配置是z-index和sizez-index：统一管理弹出层（dialog, message, loading）等组件的层级。size：统一管理表单元素大小。这些都属于全局配置项，可以全局配置来实现。在中provide的依赖，在使用的地方inject即可。举例最终返回的context会作为组件的默认插槽的 props 使用。举例：

解析 element-plus 组件 collapse 折叠面板

layout 布局默认使用 flex 布局，row 组件作为 flex 容器。col 组件作为 flex 元素。最终编译结果