【前端8】element ui常见页面布局：注意事项_Javascript

【前端8】element ui常见页面布局：注意事项

写在最前面
遇到的问题
element ui 常见页面布局：注意事项
小结

请添加图片描述

🌈你好呀！我是是yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

写在最前面

element ui 是一个基于 vue.js 的组件库，提供了丰富的 ui 组件和布局工具，帮助开发者快速构建美观、响应式的前端页面。在使用 element ui 进行页面布局时，有一些常见的注意事项，可以帮助你避免常见的问题，并提升开发效率和用户体验。

本文将介绍这些注意事项，帮助你在使用 element ui 时更加得心应手。

注意，el-container不能嵌套使用

遇到的问题

加了路由跳转后，菜单栏由左边调到了右边，很奇怪

在这里插入图片描述

经过测试，发现是子页面的.el-aside没有加<style scoped>，导致样式溢出

在这里插入图片描述

element ui 常见页面布局：注意事项

1. 了解基本布局组件

element ui 提供了许多基础布局组件，如 container、header、aside、main、footer 和 row、col 等。掌握这些组件的使用方法，是进行有效布局的前提。

container 容器：用于外层容器布局。
header 头部、aside 侧边栏、main 主要区域、footer 底部：这些都是 container 里的子组件，负责不同的区域划分。
row 行 和 col 列：用于栅格布局，row 包含多个 col 组件，通过设置 col 的 span 属性来控制列宽。

常用的菜单1

<el-container>
  <el-header>header</el-header>
  <el-container>
    <el-aside width="200px">aside</el-aside>
    <el-main>main</el-main>
  </el-container>
</el-container>

在这里插入图片描述

多一个下角

<el-container>
  <el-header>header</el-header>
  <el-container>
    <el-aside width="200px">aside</el-aside>
    <el-container>
      <el-main>main</el-main>
      <el-footer>footer</el-footer>
    </el-container>
  </el-container>
</el-container>

在这里插入图片描述

常用的菜单2

<el-container>
  <el-aside width="200px">aside</el-aside>
  <el-container>
    <el-header>header</el-header>
    <el-main>main</el-main>
    <el-footer>footer</el-footer>
  </el-container>
</el-container>

在这里插入图片描述

2. 栅格系统的使用

element ui 的栅格系统是基于 24 格的系统，每一行最多包含 24 个 col，可以通过设置 col 的 span 属性来控制每个列的宽度。

<template>
  <el-row>
    <el-col :span="12">span 12</el-col>
    <el-col :span="12">span 12</el-col>
  </el-row>
  <el-row>
    <el-col :span="8">span 8</el-col>
    <el-col :span="8">span 8</el-col>
    <el-col :span="8">span 8</el-col>
  </el-row>
</template>

注意事项：

确保 row 下的 col 之和不超过 24，否则会导致布局错乱。
使用 offset 属性可以设置列的偏移量，创建间距。

3. 响应式布局

element ui 提供了响应式布局功能，通过设置 col 的 xs、sm、md、lg、xl 属性，可以定义不同屏幕尺寸下的列宽。

<template>
  <el-row>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">responsive column</el-col>
  </el-row>
</template>

注意事项：

根据设计稿合理设置各个屏幕尺寸下的列宽，确保在不同设备上的用户体验一致。
使用媒体查询类工具辅助调试和测试响应式布局效果。

4. flex 布局的应用

element ui 的 row 组件默认采用 flex 布局，通过设置 type="flex" 属性，可以启用 flex 布局的各种功能，如水平对齐、垂直对齐和换行等。

<template>
  <el-row type="flex" justify="center" align="middle">
    <el-col :span="6">center</el-col>
  </el-row>
</template>

注意事项：

熟悉 flex 布局的基本概念和用法，可以在 element ui 文档或 mdn 上学习相关知识。
合理利用 justify 和 align 属性，控制元素的对齐方式，提升布局的灵活性和美观度。

5. 避免滥用嵌套

在使用 container 及其子组件进行布局时，尽量避免过深的嵌套层级，这不仅会增加代码复杂度，还会影响性能和维护性。

注意事项：

尽量将布局逻辑简化，减少不必要的嵌套。
如果需要复杂布局，可以考虑将部分布局抽象为独立的组件，提高代码复用性。

6. 处理边距和填充

在进行页面布局时，合理设置组件的边距和填充是非常重要的。element ui 提供了一些工具类，如 el-row 和 el-col 的 gutter 属性，可以设置行和列之间的间距。

<template>
  <el-row :gutter="20">
    <el-col :span="12">span 12</el-col>
    <el-col :span="12">span 12</el-col>
  </el-row>
</template>

注意事项：

根据设计需求合理设置 gutter 值，避免组件间距过大或过小。
可以结合 css 自定义样式，进一步调整边距和填充，确保布局美观统一。

小结

在使用 element ui 进行页面布局时，掌握和合理使用各种布局组件和工具，是打造高效、美观页面的关键。通过了解基本布局组件、栅格系统、响应式布局、flex 布局、避免嵌套和处理边距和填充等注意事项，你可以更好地应对实际开发中的各种布局需求，提升前端开发效率和用户体验。希望本文的介绍能够帮助你在 element ui 的使用过程中更加顺利。

happy coding!

欢迎大家添加好友交流。