Vue +elementUI management background instance

This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

I didn’t know how to use elementUi components when I first wrote admin background until someone told me later that there was a composite component that turned into a simple admin background template

The Container layout Container of elementUI is used, and the NavMenu navigation menu uses the routing function of the navigation menu to achieve the function of click-to-switch.

Code directory (code file connection: github.com/ljy-110/vue…

One, the layout of the page code

<template>
  <div style="height:100%;">
    <el-container class="index-con">
      <el-aside :class="showclass">
        <leftnav></leftnav>
      </el-aside>
      <el-container class="main-con">
        <el-header class="index-header">
          <topNav></topNav>
        </el-header>
        <el-main clss="index-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import topNav from './nav/topNav'
import leftnav from './nav/leftnav'
export default {
  props: {},
  components: {
    leftnav,
    topNav
  },
  data () {
    return {
       showclass: 'asideshow'}; },created() {},

  methods: {},

  computed: {},

  mounted(){},

  watch: {}}</script>
<style lang='css' scoped>
.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 {
  background-color: #E9EEF3;
  color: # 333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside..el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.aside {
  width: 64px ! important;
  height: 100%;
  background-color: # 334157;
  margin: 0px;
}
.asideshow {
  width: 240px ! important;
  height: 100%;
  background-color: # 334157;
  margin: 0px;
}
.index-header..index-main {
  padding: 0px;
  border-left: 2px solid # 333;
}
</style>
Copy the code

Second, the left navigation file code

<template>
  <div style="height:100%;">
    <div class="left-nav">
      <el-menu
      :default-active="this.$route.path"// The identifier uses routingclass="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="# 334157"// Configure the colortext-color="#fff"
      active-text-color="#ffd04b"
      router>
      <h3 class="logobox">Background management system</h3>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>A navigation</span>
        </template>
        <el-menu-item-group>
          <! -- <template slot="title">
          <el-menu-item index="/nav1">Option 1</el-menu-item>
          <el-menu-item index="/nav2">Option 2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/nav5">
        <i class="el-icon-menu"></i>
        <span slot="title">Navigation 2</span>
      </el-menu-item>
      <el-menu-item index="/nav3">
        <i class="el-icon-document"></i>
        <span slot="title">Navigation three</span>
      </el-menu-item>
      <el-menu-item index="/nav4">
        <i class="el-icon-setting"></i>
        <span slot="title">Navigation four</span>
      </el-menu-item>
    </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data () {
    return {
      activeIndex:'1'
    };
  },

  created() {},

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath); }},computed: {},

  mounted(){},

  watch: {}}</script>
<style lang='css' scoped>
.left-nav{
  /* width: 12%; * /
  height: 100%;
  background-color:# 334157;
}
.logobox {
  height: 60px;
  line-height: 60px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  margin: 0px;
  /* padding: 20px 0px; * /
}
.left-nav >>> .el-menu{
  border-right: 0px;
}
</style>
Copy the code

Three, the header navigation file code

<template>
  <div style="height:100%;" class="bwt bg">
    <div class="width:90%">
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        background-color="# 334157"
        text-color="#fff"
        active-text-color="#ffd04b"
        router>
        <el-menu-item index="/top1">Processing center</el-menu-item>
        <el-menu-item index="/top2">The message center</el-menu-item>
        <! - < el menu - item index = "/ nav5" > order management < / el menu - item > -- >
      </el-menu>
    </div>
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="# 334157"
        text-color="#fff"
        active-text-color="#ffd04b">
        <! - < el menu - item index = "/ top1" > processing center < / el menu - item > -- >
        <el-submenu index="2">
          <template slot="title">The administrator</template>
          <el-menu-item index="2-1">Personal center</el-menu-item>
          <el-menu-item index="2-2" @click="$router.push({ path:'/' })">exit</el-menu-item>
        </el-submenu>
        <! - < el menu - item index = "/ ranked by" > message center < / el menu - item > -- >
        <! - < el menu - item index = "/ nav5" > order management < / el menu - item > -- >
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data () {
    return {
      activeIndex:'1'
    };
  },

  created() {},

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath); }},computed: {},

  mounted(){},

  watch: {}}</script>
<style lang='css' scoped>
/* .left-nav{ width: 12%; Height: 93.5%; background-color:#545c64; } * /
.bwt{
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.bg{
  background-color:# 334157;
}
</style>
Copy the code

The above is the basic code, the specific code can see the following path: github.com/ljy-110/vue…