el-container的实现

el-container的实现

(^o^)/~从最简单的开始来吧：

关键点： 这边要如何判断isVertical呢？

1. 判断是否传了 direction，并判断传的值 是否是： vertical horizontal
2. 如果没传，判断 传过来的 slot里头是否有 el-header el-footer 如有，则判断是 true

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

<script>
export default {
  name: 'SxContainer',
  componentName: 'SxContainer',

  props: {
    direction: String
  },

  computed: {
    isVertical: function () {
      /*
       这边要如何判断呢？
       1.  判断是否传了 direction，并判断传的值 是否是： vertical   horizontal
       2. 如果没传，判断 传过来的 slot里头是否有 el-header  el-footer
          如有，则判断是 true
     */
        if (this.direction === 'vertical') {
          return true;
        } else if (this.direction === 'horizontal') {
          return false;
        }

      // 获取 slot
      console.log(this.$slots)
      return this.$slots && this.$slots.default
        ? this.$slots.default.some(vnode => {
            const tag = vnode.componentOptions && vnode.componentOptions.tag;
            console.log("tag==",tag)
            return tag === 'el-header' || tag === 'el-footer'
          })
        : false;
    }
  }
}
</script>