Element-UI源码——Container布局容器

Container布局容器

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

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

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

Container

<template>
	<!-- class 中为子元素的排列方向 -->
  <section class="el-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'ElContainer',

    componentName: 'ElContainer',

    props: {
      //排列方向
      direction: String 
    },

    computed: {
      isVertical() {
        //垂直
        if (this.direction === 'vertical') {
          return true;
        } else if (this.direction === 'horizontal') {
          //水平
          return false;
        }
        //默认插槽存在时 判断插槽vnode的tag标签是否为el-header 或 el-footer
        //存在为true 垂直 否则为false 水平
        return this.$slots && this.$slots.default
          ? this.$slots.default.some(vnode => {
            const tag = vnode.componentOptions && vnode.componentOptions.tag;
            return tag === 'el-header' || tag === 'el-footer';
          })
          : false;
      }
    }
  };
</script>

Container Attributes

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

样式文件

@import "mixins/mixins";

@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  
	//is-vertical判断 改变flex的方向
  @include when(vertical) {
    flex-direction: column;
  }
}

el-main el-header el-footer

这几个源码内容差不多

el-main

<template>
  <main class="el-main">
    <slot></slot>
  </main>
</template>
<script>
  export default {
    name: 'ElMain',
    componentName: 'ElMain'
  };
</script>

el-header

<template>
  <header class="el-header" :style="{ height }">
    <slot></slot>
  </header>
</template>
<script>
  export default {
    name: 'ElHeader',
    componentName: 'ElHeader',
    props: {
      height: {
        type: String,
        default: '60px'
      }
    }
  };
</script>

el-Aside

<template>
<!-- 将传入的值作为内联动态样式 如果不想设置可以设置为null 这样大小由子内容决定 下面的height同理-->
<!--<el-aside width="200px">Aside</el-aside>-->
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>
<script>
  export default {
    name: 'ElAside',
    componentName: 'ElAside',
    props: {
      width: {
        type: String,
        default: '300px'
      }
    }
  };
</script>

el-footer

<template>
  <footer class="el-footer" :style="{ height }">
    <slot></slot>
  </footer>
</template>
<script>
  export default {
    name: 'ElFooter',
    componentName: 'ElFooter',
    props: {
      height: {
        type: String,
        default: '60px'
      }
    }
  };
</script>

Header Attributes

参数	说明	类型	可选值	默认值
height	顶栏高度	string	—	60px

Aside Attributes

参数	说明	类型	可选值	默认值
width	侧边栏宽度	string	—	300px

Footer Attributes

参数	说明	类型	可选值	默认值
height	底栏高度	string	—	60px

样式文件

el-main

@import "mixins/mixins";
@import "common/var";

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

el-aside、el-main将overflow设置为auto，使内容超出容器的情况下显示滚动条而不是溢出。