VUE3.0+Element 制做PC端后台管理程序（二、总体设计）

博客介绍了使用Element的Container布局容器确定软件页面布局，阐述了Container、Header、Aside、Main、Footer等容器的属性和插槽设置，还提到若未达flex布局效果可自定义盒子写CSS布局，最后说明了各盒子应放置的内容。

一、首先确定一下软件的页面布局

我这里用的是Element的 Container 布局容器

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

TIP

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。后四个组件的亲元素必须是一个 <el-container>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

二、容器的一些属性设置

Container 属性#

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

Container 插槽#

插槽名说明子标签
— 自定义默认内容 Container / Header / Aside / Main / Footer

Header 属性#

属性名说明类型可选值默认值
height 顶栏高度 string — 60px

Header 插槽#

插槽名说明
— 自定义默认内容

Aside 属性#

属性名说明类型可选值默认值
width 侧边栏宽度 string — 300px

Aside 插槽#

插槽名说明
— 自定义默认内容

Main 插槽#

插槽名说明
— 自定义默认内容

Footer 属性#

属性名说明类型可选值默认值
height 底栏高度 string — 60px

Footer 插槽#

插槽名说明
— 自定义默认内容