el-container 各个组件源码

在elemenui 官网上 el-container 是多个组件一起使用的所以这里就一起来分析下

el-container

这里需要介绍一个东西 那就是vnode.componentOptions
这个是可以用来访问虚拟dom的一些参数
非组件的componentOptions为空

所以下面的代码中 使用vnode.componentOptions.tag 来获取组件的组件名

这里注意一点
那就是下面这个vnode.componentOptions.tag 来获取组件名的方式

// 注意此时的componentOptions.tag为模版或者render书写的标签字符串，根据用户的书写可能不统一
// 最好的方式还是使用componentOptions.Ctor.options.name
const componentOptions = vnode.componentOptions;
const componentName = componentOptions && componentOptions.Ctor.options.name || componentOptions.tag

<template>

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

    <slot></slot>

  </section>

</template>

  


<script>

  export default {

    name: 'ElContainer',

    componentName: 'ElContainer',

    props: {

      direction: String

    },


    computed: {

      isVertical() { // el-container 是flex布局
 
        if (this.direction === 'vertical') {

          return true;

        } else if (this.direction === 'horizontal') {

          return 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>

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-main

这个组件也很常规

<template>

  <main class="el-main">

    <slot></slot>

  </main>

</template>

  


<script>

  export default {

    name: 'ElMain',

    componentName: 'ElMain'

  };

</script>

el-aside

<template>

  <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>