element-ui element-plus container header footer aside mian - 分析

源代码地址 - container
源代码地址 - header
源代码地址 - footer
源代码地址 - aside
源代码地址 - main

version:element-plus 1.0.1-beta.0

container

<template>
  <section class="el-container" :class="{'is-vertical': isVertical}">
    <slot></slot>
  </section>
</template>

<script lang="ts">
import { defineComponent, computed, VNode, Component } from 'vue'

export default defineComponent({
  name: 'ElContainer',
  props: {
    // 子元素的排列方向
    direction: {
      type: String,
      default: '',
    },
  },
  setup(props, { slots }) {
    const isVertical = computed(() => {
      // 如果设置了props.direction 是垂直方向 那么返回true
      if (props.direction === 'vertical') {
        return true
      } else if (props.direction === 'horizontal') {
        // 水平方向返回false
        return false
      }
      // 没有设置或者说不是两种之一
      // 传入插槽
      if (slots && slots.default) {
        const vNodes: VNode[] = slots.default()
        // 判断插槽中是否含有 ElHeader || ElFooter 子组件
        // 有就返回true 否则 false
        return vNodes.some(vNode => {
          const tag = (vNode.type as Component).name
          return tag === 'ElHeader' || tag === 'ElFooter'
        })
      } else {
        // 没有插槽 默认false
        return false
      }
    })
    return {
      isVertical,
    }
  },
})
</script>

header

<template>
  <header class="el-header" :style="{ height }">
    <slot></slot>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ElHeader',
  props: {
    // 默认高度 60px
    height: {
      type: String,
      default: '60px',
    },
  },
})
</script>

footer

<template>
  <footer class="el-footer" :style="{ height }">
    <slot></slot>
  </footer>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ElFooter',
  props: {
    // 默认高度 60px
    height: {
      type: String,
      default: '60px',
    },
  },
})
</script>

aside

<template>
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ElAside',
  props: {
    // 默认宽度 300px
    width: {
      type: String,
      default: '300px',
    },
  },
})
</script>

main

<template>
  <main class="el-main">
    <slot></slot>
  </main>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ElMain',
})
</script>