vue中，动态菜单-NavMenu导航菜单——el-menu动态导航菜单(二)

4、动态菜单文件

src\components\console\sideBar.vue

<template>
  <div class="sideBar">
    <el-menu class="el-menu-vertical-demo" background-color="#242731" text-color="#D6D6D6" active-text-color='#A1DBF5'
      :default-active=curRoute :collapse="isCollapse">
      <template v-for="(pItem, pIndex) in menuLists">
        <el-submenu v-if="!pItem.url" :index="pIndex + ''" :key="pIndex">
          <template slot="title">
            <i :class="pItem.icon"></i>
            <span>{{ pItem.menuName }}</span>
          </template>

          <el-menu-item :index="child.url" v-for="(child, cIndex) in pItem.childMenuList" :key="cIndex"
            @click="enterOperate(child.url, child.menuId)" style="padding-left: 55px;">
            {{ child.menuName }}
          </el-menu-item>
        </el-submenu>

        <el-menu-item v-else :index="pIndex + ''" :key="pIndex" @click="enterOperate(pItem.url, pItem.menuId)">
          <template slot="title">
            <i :class="pItem.icon" style="color: #ffffff;"></i>
            <span>{{ pItem.menuName }}</span>
          </template>
        </el-menu-item>
      </template>

      <el-menu-item @click="enterOperate('/console/environmentalStat', 22222)">
        <template slot="title">
          <i class="el-icon-s-marketing" style="color: #ffffff;"></i>
          <span>数据统计</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  data() {
    return {
      curRoute: '0',
      menuLists: []
    };
  },
  computed: mapState({
    isCollapse: function (state) {
      return state.menuIsCollapse
    }
  }),
  methods: {
    enterOperate(moduleRoute, menuId) {
      this.$store.commit('setMenuId', menuId)
      this.$router.push({ path: moduleRoute, query: { menuId: menuId } });
    }
  },
  mounted() {
    this.menuLists = [{
      childMenuList: [],
      icon: "el-icon-menu",
      isMainMenu: null,
      menuId: 28,
      menuName: "应用管理",
      parentId: null,
      seq: null,
      url: "/console/appCenter"
    }, {
      childMenuList: [{
        childMenuList: null,
        icon: null,
        isMainMenu: null,
        menuId: 34,
        menuName: "产品列表",
        parentId: null,
        seq: null,
        url: "/console/dataProduct"
      }, {
        childMenuList: null,
        icon: null,
        isMainMenu: null,
        menuId: 35,
        menuName: "图层管理",
        parentId: null,
        seq: null,
        url: "/console/dataProductLayerList",
      }
      ],
      icon: "el-icon-document-checked",
      isMainMenu: null,
      menuId: 29,
      menuName: "数据产品",
      parentId: null,
      seq: null,
      url: null
    }];
    // this.menuLists = this.$store.state.menuList;
    console.log(this.menuLists, '888888888888');
  }
}
</script>
<style lang="scss" scoped>
.sideBar {
  margin-top: 64px;
  float: left;
  height: 100%;
  max-height: calc(100% - 64px);
  overflow-y: scroll;
}

.sideBar::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 202px;
  height: 100%;
  border: none;
}

.el-submenu__title>i:before {
  color: #ffffff;
}

.el-menu {
  height: 100%;
}

.el-menu-item.is-active {
  background-color: #0A0C1F !important;
}
</style>

5、主页面

src\components\console\pagesView.vue

<template>
  <div style="height: 100%">
    <console-header></console-header>
    <side-bar></side-bar>
    <div style="height: 100%;overflow: hidden;">
      <router-view></router-view>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue';
  import consoleHeader from './consoleHeader.vue';
  import sideBar from './sideBar.vue';
  export default {
    name: 'pagesView',
    components:{
      consoleHeader,
      sideBar
    },
    computed: {
      collapse() {
        return this.$store.state.menuIsCollapse;
      }
    },
    data(){
      return{
        quickMenuShow: false,
        quickMenuList: []
      }
    },
    methods:{
    }
  };

</script>
<style lang="scss" scoped>
  .fixedMenu {
    position: absolute;
    left: 90%;
    top: 80px;
    font-size: 12px;
    z-index: 99;
  .quickMenu {
    border: 1px solid #2D4EFF;
    line-height: 35px;
    padding: 0px 12px;
    box-shadow: 0 2px 12px 0 #88B1FF;
    border-radius: 4px;
    cursor: pointer;
    color: #2D4EFF;
    display: inline-block;
  }

  .quickSecondMenu {
    position: absolute;
    left: 0px;
    top: 37px;
    width: 100%;
    line-height: 30px;
    padding-left: 5px;
    z-index: 9;
    display: none;
    color: #2D4EFF;
    cursor: pointer;
    background-color:#ffffff;

  div:hover {
    color: #1095FF;
  }
  }
  .highlightBack{
    background-color: #2D4EFF;
    color:#ffffff;
  }
  .changeShow{
    display: block;
  }
  }
</style>

6、标头模块

src\components\console\consoleHeader.vue

<template>
  <div class="header clear" style="background-color: #060714">
    <div class="clear" style="width: 95%;margin: 0px auto;">
      <!-- 折叠按钮 -->
      <span class="collapse-btn fl" @click="collapseChange" style="margin-right: 20px;">
        <i v-if="!collapse" class="el-icon-s-fold" style="color: #FFFFFF;"></i>
        <i v-else class="el-icon-s-unfold" style="color: #FFFFFF;"></i>
      </span>
      <a class="fl" href="/">
        <img src="@/img/UC_logo.svg" class="imgMiddle" />
      </a>
      <ul class="fr menu" style="position: relative;">
        <li class="menuItem" v-if="$store.state.userInfo">
          <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
              <div class="avatar-img">
                <img class="user-avatar" :src="avatarImg">
                <i class="el-icon-caret-bottom"></i>
                <span class="avatar-hello">{{$store.state.userInfo.userName}}</span>
              </div>
            </div>
            <el-dropdown-menu class="user-dropdown" slot="dropdown">
              <el-dropdown-item>
                <span @click="toAccountCenter" style="display:block;">账号中心</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="logout" style="display:block;">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Vue from 'vue';
  import { mapState } from 'vuex';
  import avatarImg from '@/img/Avatar@2x.png';
  export default {
    name: 'navbar',
    data() {
      return {
        curSecondMenu: null,
        isActive: null,
        avatarImg: avatarImg
      }
    },
    computed: mapState({
      collapse: (state) => state.menuIsCollapse
    }),
    methods:{
      collapseChange: function () {
        this.$store.commit('changeCollapse');
      },
      logout: function () {
        this.$router.push('/login');
        // 退出登录清空token和用户信息
        sessionStorage.removeItem('userInfo');
        sessionStorage.removeItem('token');
        this.$store.commit('SAVE_USERINFO', '');
        this.$store.commit('SAVE_TOKEN', '');
      },
      toAccountCenter: function () {
        this.$router.push('/console/account');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .imgMiddle{
    width: 140px;
    height: 35px;
  }
  .header{
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 3;
    font-size: 18px;
    height: 64px;
    line-height: 64px;
  .menu .menuItem{
    display: inline-block;
    color: #ffffff;
    padding: 0px 20px;
    position: relative;
  &:hover >.secondMenu{
     visibility: visible;
   }
  }
  }
  .menuItem .activeLine {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #ffcc70;
    left: 50%;
    bottom: 0px;
    transform:translateX(-50%);
    border-radius: 1px;
  }
  .secondMenu{
    visibility: hidden;
    width: 792px;
    height: 240px;
    position: absolute;
    background-color: #040449;
    font-size: 12px;
    left: -50px;
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  ul{
    padding-left: 20px;
    width: 264px;
  &:hover{
     background-color: #4b39ef;
     cursor: pointer;
   }
  li{
    line-height: 20px;
  }
  }
  }
  .activeTitle{
    display:inline-block;
    transition: all 0.5s;
    transform: scale(1.4);
    cursor: pointer;
    color: #ffcc70;
  }

  .avatar-hello {
    font-size: 16px;
    color: #ffffff;
    margin-left: 20px;
  }
  .avatar-container {
  .avatar-wrapper {
    cursor: pointer;
    position: relative;
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    vertical-align: middle;
  }
  .el-icon-caret-bottom {
    position: absolute;
    top: 35px;
    font-size: 12px;
  }
  }
  }
</style>