Element-UI Container 布局容器源码

Element-UI Container 布局容器源码

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是 。

ElContainer组件

模板：

首先判断this.$slots&& this.$slots.default【this.$slots.default为默认插槽】,如果不存在直接返回false，不存在的情况就是子元素为空。this.$slots是组件的实例属性，组件是可复用的Vue的实例，和 new Vue()一样是实例，因此有以下属性

vue 实例 传送门

• vm.$data
• vm.$props
• vm.$el
• vm.$options
• vm.$parent
• vm.$root
• vm.$children
• vm.$slots
• vm.$scopedSlots
• vm.$refs
• vm.$isServer
• vm.$attrs
• vm.$listeners

CSS部分：

@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}

@include when(vertical) { //当是垂直方向排列，则设置为 column
  flex-direction: column;
}

display:flex 创建了一个 flex 容器，flex-direction:row 指定了内部元素是在水平方向排列。这里为什么还有 flex:1 呢，因为 容器是支持嵌套的，并且我们知道 flex:1 相当于 flex-grow:1;flex-shrink:1;flex-basis:0，也就是当 被嵌套的时候，它会占满剩余空间。flex-basis:auto 表示分配空间之前会先跟父容器预约自身内容大小的空间，然后剩下的才会归入到剩余空间。

ElHeader组件

模板：

CSS部分

@include b(header) {
  padding: $--header-padding; //packages/theme-chalk/src/common/var.scss scss变量
  box-sizing: border-box;
  flex-shrink: 0; //表示即使空间不够，也不会缩小  所占空间。
}

ElMain组件

模板：

CSS部分：

@include b(main) {
  // IE11 supports the 
 element partially https://caniuse.com/#search=main
  // IE 支持11 以上
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: $--main-padding;
}

通常

中包裹的内容完全由它的子元素来决定，所以并不会设置高和宽，只是通过 flex:1 来分配 容器的剩余空间。

ElFooter组件

模板：

CSS部分：

@include b(footer) {
  padding: $--footer-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}

flex-shrink: 0; 表示即使空间不够，也不会缩小 所占空间。

ElAside组件

模板：

CSS部分：

@include b(aside) {
  overflow: auto; // 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  box-sizing: border-box;
  flex-shrink: 0; //表示即使空间不够，也不会缩小  所占空间。
}

总结

element-ui 的 Container 布局容器组件的实现还是很简单的：创建了一些语义化的标签，利用插槽做内容分发，通过 flex实现布局效果。

其中header、footer 、 aside 的flex-shrink都是0，也就是不会压缩，而main中的代码flex:1表示了只有main会被压缩或者扩张，flex:1是flex:grow:1,flex:shrink:1,flex-basis:auto的简写，又因为flex:grow默认值为0,所以只有main会被压缩或扩张，header、footer 、 aside 都不变

整个布局其实就是对原生的封装，主要就是container的处理，如果浏览器不支持flex，则上述布局无效