1.2.0-beta

Container 布局容器 ​

用于布局的容器组件，方便快速搭建页面的基本结构：

  • <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
  • <el-header>：顶栏容器。
  • <el-aside>：侧边栏容器。
  • <el-main>：主要区域容器。
  • <el-footer>：底栏容器。

提示

以上组件采用了 flex 布局，请确保浏览器版本支持。此外 <el-container> 的直接子元素必须是后四者之一，后四者的父元素也必须是一个 <el-container>。

ts
import { createApp } from 'vue'
import { ElContainer, ElHeader, ElAside, ElMain, ElFooter } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElContainer)
app.use(ElHeader)
app.use(ElAside)
app.use(ElMain)
app.use(ElFooter)

常见页面布局 ​

实例 ​

API ​

Container Attributes ​

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

Container Slots ​

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

Header Attributes ​

名称说明类型默认值
height顶栏高度string60px

Aside Attributes ​

名称说明类型默认值
width侧边栏宽度string300px
名称说明类型默认值
height底栏高度string60px

更多细节参见 Element Plus Container 文档。