1.最终布局效果

 2. 布局分析:先上下划分,再左右划分

 3. 整个主页布局需要使用到element-plus 里面的一些布局组件  ,分别是:

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

Container 布局容器 | Element Plus (gitee.io)icon-default.png?t=LA92https://element-plus.gitee.io/zh-CN/component/container.html

4. 页面布局代码实现

4.1 布局参考,不需要自己考滤应该怎么去实现或设计布局,高效率的做法是直接去官网复制一个合适自己项目的布局进行改造。如图,这个就比较符合我们项目页面的布局要求

官网
Container 布局容器 | Element Plus (gitee.io)icon-default.png?t=LA92https://element-plus.gitee.io/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

 4.2 找到合适的布局框架后,复制该布局框架的页面代码

    <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>

4.3 首先导入布局组件

因为页面是按需引入,所以每添加一个页面,页面里面有新的组件时,需要在element.js 引入相关组件。

4.2 element.js 按需引入

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain
} from 'element-plus'
export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.config.globalProperties.$message = ElMessage
}

 4.3 为Header,Aside,Main 组件添加背景颜色

1. 首先如何取出对应的背景颜色,可以使用一个小工具 FSCapture取色器

前端必备:FSCapture取色器_希望你会喜欢-CSDN博客icon-default.png?t=LA92https://blog.csdn.net/qq_45538469/article/details/1042418162. 下载安装完成后打开,直接使用该工具进行取色

 3. 点击取色按键,把该取色针管放在需要取的颜色上,按下完成取色

 4.取色完成

 5.如若没有显示取色针管,打开设置

 6.勾选取色针管

 4.4 通过类选择器为组件添加背景颜色

注意,如何获取到类选择器。每一个Element-plus 中提供的组件,它的组件名称就是它的一个类名。也就是相当一个类选择器。

4.5 效果如图,但是并没有并占全屏。

 1. 如上图,如果遇到页面没有撑满全屏的情况。首先需要做的是,检查一下页面元素。看看是那个元素没有占满全屏,导致的。

 2. 通过检查发现, el-container 就是最外层的容器。那基本就是,让它全屏了,基本就能实现整个页面的布局效果了。

小技巧:在设置100%的时候一直没有生效。原因是,它的父元素没有高度的话,直接给子元素设置高度是没有作用的。所以给父 div 添加一个高度值,子元素的高度值就生效了 

以上出自:【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibiliicon-default.png?t=LA92https://www.bilibili.com/video/BV1x64y1S7S7?p=30 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐