【Element入门】4、Element UI 布局组件详解

一只小爪磕

已于 2024-05-22 18:17:05 修改

阅读量2.5k

点赞数 14

分类专栏： Element UI系列前端教学-爪磕文章标签： ui javascript vue.js 前端框架前端 elementui

于 2024-05-22 18:11:11 首次发布

本文链接：https://blog.csdn.net/weixin_52938153/article/details/139124403

版权

前端教学-爪磕同时被 2 个专栏收录

98 篇文章 3 订阅

订阅专栏

Element UI系列

16 篇文章 2 订阅

订阅专栏

【Element入门】Element UI 布局组件详解

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
 【Element入门】2、Element UI 的基本使用
 【Element入门】3、Element UI 表单组件详解
【Element入门】4、Element UI 布局组件详解（本文）
【Element入门】5、Element UI 导航组件详解
 【Element入门】6、Element UI 数据展示组件详解
 【Element入门】7、Element UI 反馈组件详解
 【Element入门】8、Element UI 自定义主题

布局是 Web 应用的重要组成部分，合理的布局可以提升用户体验和界面美观度。Element UI 提供了强大的布局组件，包括 Grid 布局系统和 Container 布局组件，帮助开发者快速构建响应式和灵活的页面布局。本篇文章将详细介绍这两类布局组件的使用方法。

Grid 布局系统

基本概念

Grid 布局系统是基于 24 栅格系统实现的，通过 el-row 和 el-col 组件来进行布局。el-row 代表行，el-col 代表列，列的宽度通过 span 属性来设置，最大值为 24。

基本使用

首先，我们来看一个简单的 Grid 布局示例：

<template>
  <div id="app">
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

在这个示例中，我们创建了一个包含三列的行，每列的宽度为 8 个栅格，总共占满 24 个栅格。

设置列间距

可以通过 el-row 的 gutter 属性设置列之间的间距：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，每列之间有 20px 的间距。

灵活布局

可以通过 offset 属性设置列的偏移量，实现更加灵活的布局：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，第二列向右偏移了 6 个栅格。

响应式布局

Grid 布局系统也支持响应式布局，可以通过设置 xs, sm, md, lg, xl 等属性来适配不同的屏幕尺寸：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，不同屏幕尺寸下每列的宽度不同，实现了响应式布局。

Container 布局组件

基本概念

Container 布局组件包括 el-container、el-header、el-aside、el-main 和 el-footer，用于快速构建常见的页面布局结构，如顶部导航、侧边栏和内容区等。

基本使用

以下是一个简单的 Container 布# 【Element入门】Element UI 布局组件详解

Grid 布局系统

基本概念

基本使用

首先，我们来看一个简单的 Grid 布局示例：

<template>
  <div id="app">
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e9eef3;
}
</style>

在这个示例中，我们创建了一个包含三列的行，每列的宽度为 8 个栅格，总共占满 24 个栅格。

设置列间距

可以通过 el-row 的 gutter 属性设置列之间的间距：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，每列之间有 20px 的间距。

灵活布局

可以通过 offset 属性设置列的偏移量，实现更加灵活的布局：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，第二列向右偏移了 6 个栅格。

响应式布局

Grid 布局系统也支持响应式布局，可以通过设置 xs, sm, md, lg, xl 等属性来适配不同的屏幕尺寸：

<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>
</template>

在这个示例中，不同屏幕尺寸下每列的宽度不同，实现了响应式布局。

Container 布局组件

基本概念

Container 布局组件包括 el-container、el-header、el-aside、el-main 和 el-footer，用于快速构建常见的页面布局结构，如顶部导航、侧边栏和内容区等。通过组合这些组件，可以方便地实现复杂的页面布局。

基本使用

以下是一个简单的 Container 布局示例：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main Content</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  padding: 20px;
}
</style>

在这个示例中，我们使用 el-container 作为容器组件，并使用 el-header、el-main 和 el-footer 组件分别创建了页眉、主体内容区和页脚。

垂直布局

可以通过在 el-container 内部嵌套多个 el-container 组件来实现垂直布局，如下所示：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main Content</el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  padding: 20px;
}
</style>

在这个示例中，我们在 el-container 内部嵌套了一个包含 el-aside 和 el-main 的 el-container，实现了典型的侧边栏布局。

垂直与水平布局结合

通过组合使用 el-container、el-header、el-aside、el-main 和 el-footer，可以实现更加复杂的布局，例如包含顶部导航栏、侧边栏和内容区的布局：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main Content</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  padding: 20px;
}
</style>

在这个示例中，我们使用了多个嵌套的 el-container，实现了一个包含顶部导航栏、侧边栏、主内容区和页脚的复杂布局。

配置组件属性

el-container 布局组件还提供了一些有用的属性，可以根据需要进行配置。例如：

el-aside 的 width 属性可以设置侧边栏的宽度。
el-header 和 el-footer 的 height 属性可以设置页眉和页脚的高度。

以下是一个带有自定义属性的示例：

<template>
  <div id="app">
    <el-container>
      <el-header height="60px">Header</el-header>
      <el-container>
        <el-aside width="250px">Aside</el-aside>
        <el-main>Main Content</el-main>
      </el-container>
      <el-footer height="40px```vue
<template>
  <div id="app">
    <el-container>
      <el-header height="60px">Header</el-header>
      <el-container>
        <el-aside width="250px">Aside</el-aside>
        <el-main>Main Content</el-main>
      </el-container>
      <el-footer height="40px">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  padding: 20px;
}
</style>

在这个示例中，我们自定义了 el-header 和 el-footer 的高度，以及 el-aside 的宽度，进一步展示了布局组件的灵活性。

结语

通过本章的学习，我们了解了 Element UI 提供的两种主要布局系统：Grid 布局系统和 Container 布局组件。Grid 布局系统基于 24 栅格系统，适用于灵活和复杂的栅格布局；Container 布局组件则用于快速构建常见的页面结构，如顶部导航、侧边栏和内容区等。Element UI 提供的这些布局组件可以帮助我们快速构建响应式和美观的页面布局。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！