【实现】Vue主页侧边栏

效果展示

使用技术

Vue+Element UI

代码部分

1 整体布局

整体布局源于Element UI 中给的样例，点击进入

基础框架代码

<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-header>
<!--      logo和项目名称-->
      <div class="left_box">
        <img src="../assets/img/school.png">
        <span>学院信息管理系统</span>
      </div>
<!--      登录用户头像-->
      <div class="right_box">
        <el-dropdown >
          <img src="../assets/img/bixin.gif">
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">交流讨论</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </el-header>

---

/* 头部布局*/
.el-header{
  background-color: #001529;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center; /*文字居中*/
  font-size: 20px;
  /*左边logo 和 标题*/
  .left_box{
    display: flex; /*流式布局 */
    align-items: center;
    /*logo*/
    img{
      width: 60px;
      height: 60px;
      margin: 0px 0px 10px 10px ; /*上下左右*/
    }
    /*标题*/
    span{
      margin-left: 15px;
    }
  }
  /*右边的登录头像*/
  .right_box{
    .el-dropdown>img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #FFFFFF;
      padding-left: 5px;
      margin: 0px 15px 0px 0px;
      background-size: contain;
    }
  }
}

侧边栏内容和样式

<!--      侧边栏
el-menu 主菜单
el-submenu 子菜单
el-menu-item 内容项

-->
      <el-aside :width="isCollapse?'60px':'200px'">
<!-- 展开/收起 -->
        <div class="toggle_box" @click="toggleCollapse">|||</div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
        :collapse="isCollapse"
        :collapse-transition="false"
        :unique-opened="true"
        :router="true">
        <!-- 该部分是用了外部的组件 防止菜单栏的选项过于多 -->
<MenuTree :menuList="this.MenuList"></MenuTree>
        </el-menu>
      </el-aside>

Script部分代码

import MenuTree from '../components/MenuTree'
export default {
  name: 'Main',
  data() {
    return {
      isCollapse: false,
      <!-- 这是一段与侧边栏相关的Json-->
     MenuList: [
        {
          "id": 1,
          "parentId": 0,
          "menuName": "系统管理",
          "url": "",
          "icon": "el-icon-setting",
          "orderNum": 1,
          "open": 1,
          "disabled": false,
          "perms": null,
          "type": 0,
          "children": [
            {
              "id": 253,
              "parentId": 1,
              "menuName": "欢迎页面",
              "url": "/welcome",
              "icon": "el-icon-star-off",
              "orderNum": 1,
              "open": 0,
              "disabled": false,
              "perms": "welcome:view",
              "type": 0,
              "children": []
            },
            ..
             {
              "id": 307,
              "parentId": 5,
              "menuName": "操作日志",
              "url": "/logs",
              "icon": "el-icon-edit",
              "orderNum": 1,
              "open": 1,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            }
          ]
        }
      ],
    }
  },
  components:{
    MenuTree
  },
  methods:{
    toggleCollapse(){
      this.isCollapse = (!this.isCollapse);
    }
  }
}
</script>

在components文件夹，创建侧边栏组件

/*
改部分主要是针对Json文件中的内容进行遍历 显示，可以实现测边框内容的自定义
*/
<template>
  <div>
  /* 遍历 json文件 */
    <template v-for="item in this.menuList">
    /* 根据Json文件判断 如果有子目录，则调用该部分 */
      <el-submenu :disabled="item.disabled" :index="item.id+''" :key="item.id+''" v-if="item.children.length>0">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </template>
        <MenuTree :menu-list="item.children"></MenuTree>
      </el-submenu>
        /* 根据Json文件判断 如果没有子目录，则调用该部分 */
      <el-menu-item
        v-else
        :disabled="item.disabled"
        :index="item.url+''"
        :route="item.url+''"
        @click="savePath(item.url)"
        :key="item.id"
        style="padding-left: 50px;"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  props: ['menuList'],
}
</script>
<！-- 这个主要是为了防止在 Main.Vue中的显示问题 -->
<style lang="less" scoped>
/*实现了溢出处理*/
.el-menu--collapse span,
.el-menu--collapse i.el-submenu__icon-arrow {
  height: 0;
  width: 0;
  overflow: hidden;/* (如果没有该句，在页面上会出现多余部分)*/
  visibility: hidden;
  display: inline-block;
}
</style>

<script>
export default {
  name: "MenuTree", //模板名称
  data() {
    return {};
  },
  beforeMount() {},
  props: ["menuList"],
  methods:{
    //保存激活路径
    savePath(path) {
      window.sessionStorage.setItem("activePath", path);
      this.activePath = path;
    },
  },
  created(){}
};
</script>