本文详细介绍了Element-UI中El-row和El-col组件的使用，重点讨论了如何通过flex布局控制样式和子组件排版。内容涵盖了gutter属性的应用，解释了为何使用负margin和padding来处理col间距，并提到了row默认的float布局及如何切换到flex布局。此外，还提及了关键API如This.$slots.default和样式编写中的BEM模式，以及scss中的@mixin和@at-root指令。最后，给出了一个渲染实例，并总结了col自适应原理，即浮动或弹性布局、栅格数、宽度百分比和媒体查询的结合应用。
El-row
这里使用的是render来进行渲染
render函数中 h函数有三个参数：1.element 2.属性 3.childrens
El-row主要就是通过flex弹性布局来控制样式和子组件排版的
注意
1.gutter的用法，gutter表示col之间的间距，这里用左右margin取负数是为了让
最左边和最右边的col好处理,col取padding正值 一正一负就可以抵消
2.row默认子组件是使用float浮动来布局 需要手动设置为flex才会是弹性布局
关键api
This.$slots.default
El-col
关键api
parent.options.componentName/this.parent
col之间的间距计算
注意 这里取一半的原因是 左右一半相加就是gutter
其他栅格样式的控制
样式方面：
element的样式写在了这个目录并且作为了一个单独的模块来处理
Element用的scss来做css的预编译
同时大量运用了BEM 模式来书写
@at-root的作用就是用来平铺嵌套的
在scss中 使用@include来调用mixin 例外在括号中字符串不需要加引号！这个跟js调用不同，@content是占位符 类似slot插槽
1. 用例
渲染成
总结：col的自适应原理就是 浮动或弹性+栅格数+宽度百分比+媒体查询
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
