element之layout布局源码解读

通过基础的 24 分栏，迅速简便地创建布局。

总结：

• el-row ,el-col 设计之初就是要成对出现的，互相配合做快速布局用的
• 可以通过传参设置布局之间的间距，偏移；也可以选择布局方式是flex布局；支持响应式
• 涉及了父组件向子组件传参；子组件得到父组件上定义的属性
• 支持传递Number，Object两种类型的属性值

以下是读源码时的一些记录。

gutter的传递

• el-row上定义了gutter,即元素之间的间距
• el-col通过$parent，找到el-row,拿到gutter的值，然后设置自己的 padding
• 注意：这里的的 el-col直接父组件可能不是 el-row，所有要向上一直查找到最近的el-row
• 结论： el-row ,el-col 设计之初就是要成对出现的，互相配合做快速布局用的

核心代码：

  computed: {
    gutter(){
      /*要一直找到最近的 el-row 组件，然后拿到的gutter的值
        由此可见，只要给 el-row设置了gutter，那么el-row下面的el-col，都会有gutter值的左右间距
        注意： el-col只会去找离的最近的 el-row,然后设置值
       */
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'SxRow') {
        parent = parent.$parent
      }
      return parent ? parent.gutter : 0
    }
  },

清除浮动影响的css

el-row中的el-col是用的float布局，el-row清除浮动,撑开高度的方法：

.el-row::before, .el-row::after {
    display: table;
    content: "";
}

组件间传Number类型值用动态赋值方式

为什么要用 :span动态赋值方式传属性。

因为 el-col中做了参数校验，span比如传入一个Number类型

 <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>

// el-col组件中
props: {
    span: {
      type: Number,
      default: 24
    },
}

用媒体查询实现响应式

@media only screen and (max-width: 767px) {
	// ....
}
@media only screen and (min-width: 768px){
	// ...
}
@media only screen and (min-width: 992px){
	// ...
}
@media only screen and (min-width: 1200px){
	// ....
}
@media only screen and (min-width: 1920px){
	// .....
}

媒体查询属性 支持传递数值或者对象

<el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
      <el-col :xs="{span:6}" :sm="{span:8}"></el-col>
</el-row>

如上代码中，el-col中的xs属性既支持传递数字，也支持传递对象;

下面是 el-col中做的响应的处理

['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
    console.log("size===",this[size])
    if(typeof this[size] === 'number') {
        classList.push(`el-col-${size}-${this[size]}`)
    }else if(typeof this[size] === 'object') {
        const props = this[size];
        Object.keys(props).forEach(prop => {
            classList.push(
                prop !== 'span'
                ? `el-col-${size}-${prop}-${props[prop]}`
                : `el-col-${size}-${props[prop]}`
            )
        })
    }
});