el-container布局容器，方便快速布局

2022-07-22 440 阅读1分钟

`Container`布局容器，方便快速布局

总结：

使用flex布局
使用语义化标签section,main,aside,footer

el-container组件里会判断直接子组件中是否有el-header,el-footer,如果有，则设置为垂直布局，否则是水平布局

判断代码：

this.$slots && this.$slots.default
    ? this.$slots.default.some(vnode => {
        const tag = vnode.componentOptions && vnode.componentOptions.tag;
        return tag === 'sx-header' || tag === 'sx-footer'
        })
    : false;

header footer 默认高度是 60px，允许传入自定义的;
aside默认宽度是300px,允许自定义传入
mian的 flex:1 ,这样main主体部门就占据了除了header，footer剩下的全部空间

`el-main`

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

<script>
  // el-main的 flex:1  这样就会占据除了header，footer剩下的全部空间
  export default {
    name: 'SxMain',
    componentName: 'SxMain',
  }
</script>

`el-aside`

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

<script>
  export default {
    name: 'SxAside',
    props: {
      width: {
        type: String,
        default: '300px'
      }
    }
  }
</script>

`el-footer`

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