菜鸟读element源码四el-container

组件Container

官网上对于Container布局容器的描述如下图

Container是一个容器组件，根据官网的描述它的子元素只能是el-head、el-aside、el-main、el-footer四者，而四者的父元素也只能是Container。我们先来模仿el-container源码

模仿代码中均以el-test 替换el, 目的是为了边模仿边测试和el组件的效果对比

<template>
  <section class="el-test-container" :class="{'el-test-is-vertical': isVertical}">
    <slot></slot>
  </section>
</template>
<script>
export default {
  name: 'ElTestContainer',

  componentName: 'ElTestContainer',

  props: {
    direction: String
  },

  computed: {
    isVertical() {
      if (this.direction === 'vertical') {
        return true
      } else if (this.direction === 'horizontal') {
        return false
      }
      
      
      return this.$slots && this.$slots.default? 
      this.$slots.default.some(vnode => {
        let tag = vnode.componentOptions && vnode.componentOptions.tag
        return tag === 'el-test-header' || tag === 'el-test-footer'
      }) : false
    }
  },
}
</script>

container组件算是一个最基本的tempalte形式的vue文件。

isVertical是为了判断是否需要垂直布局，如果未设置，则根据子元素是否包含el--header和el-footer来决定。this.$slots是组件的实例属性，因为组件是可以复用的VUE实例，因此和 new Vue()一样，均还有以下属性

先判断this.$slots是否存在，如果存在，遍历this.$slots.default，即遍历<slot></slot>中的子元素，如果子元素中存在tag为el-header || el-footer则返回为true。此处some函数的使用是在如果有一个为true则返回true。 this.slots this.$slots.default 的关系如下

console.log(this.$slots)
console.warn(this.$slots.default)

this.$slots.defaullts中的每一个元素都是一个VNode，vue的节点，包含该元素的 所有信息，我们所需要的tag属性，放在componentOptions.tag中。VNode的信息基本如下

。

子组件header

<template>
  <header class="el-test-header" :style="{height}">
    <slot></slot>
  </header>
</template>
<script>
export default {
  name: 'ElTestHeader',

  componentName: 'ElTestHeader',

  props: {
    height: {
      type: String,
      default: '60px'
    }
  }
}
</script>

几个子组件的样式均长得差不多，不同的在于样式文件中，el-head和el-footer均设置了flex-shrink = 0表示子组件el-header 和el-footer均不会被压缩。

总结

container 组件基本简单，感觉核心在于flex语法的应用，特别是flex-grow flex-shrink flex-basis的应用。因此最后对于flex-grow, flex-shrink, flex-basis做个总结

flex-grow 扩展比例

flex-shrink 收缩比例

flex-basis 伸缩基准值

当父元素设置了display:flex属性的时候，子元素设置flex即可生效。在flex的三个属性当中，flex-basis是作为基准值，是计算最后展现出来的子元素宽度的决定性因素，grow shrink是否起作用需要依赖于basis。

假设我们的样例代码

<div style="display:flex">
    <div style="flex:1;border:1px solid red;height:30px;"></div>
    <div style="flex:2;border:1px solid green;height:30px;"></div>
</div>

此时flex在浏览器中展现如下

此时两个子元素的basis属性之和小于父元素的宽度，此时grow会起作用。此时除了子元素本身宽度之外，剩余宽度将按照1：2的比例分配给两个子元素。 计算公式如下

(剩余空间m) = (父元素宽度width) - (子元素basic之和)
(当前子元素最终宽度final) =  (剩余宽度m) * (当前子元素的grow值) / (所以子元素的grow值之和)  +   (当前子元素的basis)

样例代码

<div style="display:flex">
      <div style="flex:0 1 1000px;border:1px solid red;height:30px;"></div>
      <div style="flex:0 4 1000px;border:1px solid green;height:30px;"></div>
    </div>

此时两个子元素的basis属性之和大于父元素的宽度，此时shrink会起作用。此时子元素basis之和大于父元素宽度，basis之和减去父元素宽度，得到的溢出宽度将按照1：4的比例压缩两个子元素。

计算公式如下

(溢出宽度m) = (子元素basis之和) -  (父元素宽度width)
(当前子元素最终宽度final) = (当前子元素的basis) -  (溢出宽度m) * (当前子元素的shrink值) / (所以子元素的shrink值之和)

google看到了flex存在三个关键字 none initial auto 如下所示