[VUE project practice] 16. Homepage Header and left menu bar layout

Continued< 15. Home page layout design and frame construction>
In the last article, we built the overall framework of the Home homepage (three blocks, the left menu bar, the right main area and the head navigation bar). In the second part, we will write the layout style of the head Header and the left menu bar.

Let's review our overall layout:

Then we want to realize the effect diagram:

1, Header layout

You can see that the left side of the header area is a Logo and system name, and the right side is an exit button. The simplest way to implement this left-right layout is to use the flex layout. A large DIV is wrapped on the left, a picture and text are placed, and an exit button is placed on the right.

Let's write it. We find "El header" in Home.vue and place div in it:

<el-header><!-- Head area -->
    <div>
        <img src="../assets/logo2.png" alt="" height="50px"/>
        <span>E-commerce background management system</span>
    </div>
    <el-button type="info" @click="logout">sign out</el-button>
</el-header>

The picture is another one I found casually, and then I need to add flex layout for El header below (at the same time, div and text span also need to add styles):

 .el-header{
     background-color: #373d41;
     display: flex; //Set display as flex layout
     justify-content: space-between;//Set to flex left and right layout
     padding-left: 0;//The left inner margin is 0 (the Logo is pasted on the left)
     align-items: center;//Center the element up and down (prevent the right button from sticking up and down)
     color: #fff;
     font-size: 20px;
     > div {//Embedded div style
         display: flex;
         align-items: center;//Logo and text are centered up and down
         span {
             margin-left: 15px;//Space shall be set on the left side of the text to prevent it from clinging to the Logo
         }
     }
 }

Full code:

<template>
    <el-container class="home-container">
        <el-header><!-- Head area -->
            <div>
                <img src="../assets/logo2.png" alt="" height="50px"/>
                <span>E-commerce background management system</span>
            </div>
            <el-button type="info" @click="logout">sign out</el-button>
        </el-header>
        <!-- Page body area -->
        <el-container>
            <!-- sidebar  -->
            <el-aside width="200px">Aside</el-aside>
            <!-- Right content body -->
            <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: 100%;
}
 .el-header{
     background-color: #373d41;
     display: flex; //Set display as flex layout
     justify-content: space-between;//Set to flex left and right layout
     padding-left: 0;//The left inner margin is 0 (the Logo is pasted on the left)
     align-items: center;//Center the element up and down (prevent the right button from sticking up and down)
     color: #fff;
     font-size: 20px;
     > div {//Embedded div style
         display: flex;
         align-items: center;//Logo and text are centered up and down
         span {
             margin-left: 15px;//Space shall be set on the left side of the text to prevent it from clinging to the Logo
         }
     }
 }
  .el-aside{
     background-color: #333744;
 }
  .el-main{
     background-color: #eaedf1;
 }
</style>

effect:

2, Left menu bar layout

Key points of the left menu bar layout:

To realize the secondary collapsible menu, you need to know that El submenu is the primary menu in El menu, and then use El menu item as the nested secondary menu, where your i label is the small icon of the menu and span is the text of the menu.

We log in to the element UI official website, find the navigation menu sample of custom color, copy its code, and prepare for transformation:

Code (all styles in El menu except background and text are deleted):

<el-menu
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>Navigation one</span>
    </template>
    <el-menu-item-group>
      <template slot="title">Group I</template>
      <el-menu-item index="1-1">Option 1</el-menu-item>
      <el-menu-item index="1-2">Option 2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="Group 2">
      <el-menu-item index="1-3">Option 3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">Option 4</template>
      <el-menu-item index="1-4-1">Option 1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">Navigation II</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">Navigation III</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">Navigation IV</span>
  </el-menu-item>
</el-menu>

Open element.js of the item and first reference the components "Menu", "Submenu", "MenuItemGroup" and "MenuItem" required by the Menu:

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, 
    Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.prototype.$message = Message

Then open Home.vue and paste the above code into El side:

<template>
  <el-container class="home-container">
    <el-header><!-- Head area -->
      <div>
        <img src="../assets/logo2.png" alt="" height="50px" />
        <span>E-commerce background management system</span>
      </div>
      <el-button type="info" @click="logout">sign out</el-button>
    </el-header>
    <!-- Page body area -->
    <el-container>
      <!-- sidebar  -->
      <el-aside width="200px">
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>Navigation one</span>
            </template>
            <el-menu-item-group>
              <template slot="title">Group I</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">Option 4</template>
              <el-menu-item index="1-4-1">Option 1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">Navigation II</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">Navigation III</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">Navigation IV</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- Right content body -->
      <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: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex; //Set display as flex layout
  justify-content: space-between; //Set to flex left and right layout
  padding-left: 0; //The left inner margin is 0 (the Logo is pasted on the left)
  align-items: center; //Center the element up and down (prevent the right button from sticking up and down)
  color: #fff;
  font-size: 20px;
  > div {
    //Embedded div style
    display: flex;
    align-items: center; //Logo and text are centered up and down
    span {
      margin-left: 15px; //Space shall be set on the left side of the text to prevent it from clinging to the Logo
    }
  }
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
</style>

effect:

The menu and the secondary menu are displayed, but the background color of the menu is different from the main color on the left. Let's modify the background color of El menu:

background-color="#333744"

effect:

Then, there are primary and secondary menus and disabled menus in the official code. The current project only needs secondary menus, so we delete all unnecessary menu styles:

<template>
  <el-container class="home-container">
    <el-header><!-- Head area -->
      <div>
        <img src="../assets/logo2.png" alt="" height="50px" />
        <span>E-commerce background management system</span>
      </div>
      <el-button type="info" @click="logout">sign out</el-button>
    </el-header>
    <!-- Page body area -->
    <el-container>
      <!-- sidebar  -->
      <el-aside width="200px">
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b">
          <!-- First level menu -->
          <el-submenu index="1">
            <!-- Template area of the first level menu -->
            <template slot="title">
              <!-- Icon -->
              <i class="el-icon-location"></i>
              <!-- text -->
              <span>Navigation one</span>
            </template>
            <!-- Secondary menu -->
            <el-menu-item index="1-1">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">Navigation II</span>
                </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- Right content body -->
      <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: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex; //Set display as flex layout
  justify-content: space-between; //Set to flex left and right layout
  padding-left: 0; //The left inner margin is 0 (the Logo is pasted on the left)
  align-items: center; //Center the element up and down (prevent the right button from sticking up and down)
  color: #fff;
  font-size: 20px;
  > div {
    //Embedded div style
    display: flex;
    align-items: center; //Logo and text are centered up and down
    span {
      margin-left: 15px; //Space shall be set on the left side of the text to prevent it from clinging to the Logo
    }
  }
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
</style>

After deleting, look at the style again,

At present, the menu column is optimized for the style we need.

In the next article, we get the menu through the data interface and load it on the page.

Reference: dark horse programmer (www.itheima.com) Vue project practical teaching video

Please indicate the source for Reprint: https://blog.csdn.net/u013517797/article/details/120583935

Tags: Vue.js

Posted on Fri, 01 Oct 2021 22:16:03 -0400 by gabrielp

Programmer Help

[VUE project practice] 16. Homepage Header and left menu bar layout

1, Header layout

2, Left menu bar layout

Hot Tags