ElementPlus布局容器

一、ElementPlus布局容器简介

Element Plus 是一个基于 Vue 3 的高质量 UI 组件库，它提供了多个布局容器组件，用于实现灵活的页面布局。这些布局容器组件可以根据需要进行灵活组合和嵌套，以实现复杂的页面布局效果。以下是一些常见的布局容器组件：

el-row：行布局容器，用于在水平方向上排列一组列组件。

el-col：列布局容器，用于在垂直方向上排列一组行组件。

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

el-header：顶栏容器，通常用于放置导航栏等。

el-aside：侧边栏容器，通常用于放置菜单等。

el-main：主要区域容器，通常用于放置主要内容。

el-footer：底栏容器，通常用于放置版权信息等。

二、各布局容器详细解释

2.1 el-row 和 el-col

2.1.1 基础布局

使用 el-row 和 el-col 组件，并通过 el-col 组件的 span 属性可以自由地组合布局。组件默认使用 Flex 布局，不需要手动设置 type="flex"，请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

<template>

  <el-row>

    <el-col :span="12">占用12列</el-col>

    <el-col :span="12">占用12列</el-col>

  </el-row>

</template>

2.1.2 分栏间隔

行提供 gutter 属性来指定列之间的间距，其默认值为 0。

<template>

  <el-row :gutter="20">

    <el-col :span="12">占用12列</el-col>

    <el-col :span="12">占用12列</el-col>

  </el-row>

</template>

2.1.3 列偏移

通过指定 el-col 组件的 offset 属性可以指定分栏偏移的栏数。

<template>

  <el-row>

    <el-col :span="12" :offset="6">偏移6列，占用12列</el-col>

  </el-row>

</template>

2.1.4 对齐方式

可以通过 justify 属性来定义子元素的排版方式，其取值为 start、center、end、space-between、space-around 或 space-evenly。

<template>

  <el-row justify="space-between">

    <el-col :span="6">列1</el-col>

    <el-col :span="6">列2</el-col>

    <el-col :span="6">列3</el-col>

  </el-row>

</template>

2.1.5 响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<template>

  <el-row>

    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">响应式列</el-col>

  </el-row>

</template>

2.2 el-container、el-header、el-aside、el-main 和 el-footer

2.2.1 基本用法

el-container 提供了三种基本布局方式：horizontal、vertical 和 vertical-reverse。通过设置 direction 属性，可以实现不同的布局效果。

<!-- 水平布局 -->

<template>

  <el-container direction="horizontal">

    <el-header>Header</el-header>

    <el-aside width="200px">Aside</el-aside>

    <el-main>Main</el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

<!-- 垂直布局 -->

<template>

  <el-container direction="vertical">

    <el-header>Header</el-header>

    <el-aside width="200px">Aside</el-aside>

    <el-main>Main</el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

<!-- 垂直反向布局 -->

<template>

  <el-container direction="vertical-reverse">

    <el-header>Header</el-header>

    <el-aside width="200px">Aside</el-aside>

    <el-main>Main</el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

2.2.2 嵌套布局

el-container 支持嵌套使用，可以实现复杂的页面布局。例如，可以在 el-main 中再嵌套一个 el-container。

<template>

  <el-container direction="vertical">

    <el-header>Header</el-header>

    <el-container direction="horizontal">

      <el-aside width="200px">Aside</el-aside>

      <el-main>Main</el-main>

    </el-container>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

2.2.3 其他属性

除了 direction 属性之外，el-container 还支持一些其他重要的属性和特性，用于更精细的布局控制。

justify 属性：用于设置子组件的水平对齐方式，可选值为 start、end、center、space-between、space-around。

<template>

  <el-container direction="horizontal" justify="space-around">

    <el-header>Header</el-header>

    <el-main>Main</el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

align 属性：用于设置子组件的垂直对齐方式，可选值为 top、middle、bottom。

<template>

  <el-container direction="vertical" align="middle">

    <el-header>Header</el-header>

    <el-main>Main</el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>