Vue3+Element-Plus 主页Header布局设计 二三_el-header

1. Header 布局最终设计效果

 2. 布局分析

 3. 如何实现左右布局的方式

3.1 Flex 布局方式

• 左侧由一个大 DIV 组成，DIV 里面包含图片和文字
• 右侧直接摆放一个按钮

3.3 设计布局使用到的图片

1. 需要把该图片放在assets 静态资源文件夹中

 2. 如图所示

 3.2 代码编写

<!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/heima.png" alt="">
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>

 3. 保存，效果是出来了，但是页面还没有进行添加任何样式

3.4 编写页面样式，美化页面效果 

1.首先,给header 设置一个Flex （弹性）布局方式

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
}

2. 保存刷新页面，头部区域就明显划分出来了。左边就是图片和文本，右边是按钮。

 3. 继续编写完善头部header样式，消除图片左边距以及给字体设置大小和颜色，让右边按钮居中显示。

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
 
}

4. 可以看到效果已经出来了。 

 5.那接下来， 我们需要设置头部文本在纵向居中对齐，所以需要再给左侧的大DIV 添加一个Flex （弹性布局），使用嵌套的方式进行添加Flex 布局

6. 代码实现

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
// 嵌套
> div{
  // 弹性布局
display: flex;
// 纵向上居中对齐
align-items: center;
// 给文本和图片添加间距，使用类选择器
span{
  margin-left: 15px;
}
}
 
}

7. 最终页面效果

4. Home.vue 组件完整事例代码

<template>
 <el-container class="home_container">
  <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/heima.png" alt="">
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
 
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">Aside</el-aside>
        <!-- 右侧内容主体区域 -->
        <el-main>Main</el-main>
      </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.home_container{
  height: 50em;
}
.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
// 嵌套
> div{
  // 弹性布局
display: flex;
// 纵向上居中对齐
align-items: center;
// 给文本和图片添加间距，使用类选择器
span{
  margin-left: 15px;
}
}
 
}
.el-aside{
  background-color: #313743;
}
.el-main{
  background-color: #E9EDF1;
}
</style>

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