基于element NavMenu 导航菜单布局样式，对vue-typescript-admin-template进行更改

骑猪看日落 2022-03-16 05:34 565阅读 0赞

目前菜单项为静态生成

### 界面截图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70 1][]

### 路由设置 ###

import Vue from "vue";
    import Router from "vue-router";
    import Layout from './views/main/main.vue';
    
    Vue.use(Router);
    
    export default new Router({
      // mode: "history",
      base: process.env.BASE_URL,
      routes: [
    
        {
          path: '/permission',
          component: Layout,
          redirect: '/permission/adminAccount',
          name: 'permission',
          meta: { title: '权限管理'},
          children: [
            {
              path: 'adminAccount',
              component: () => import('@/views/permission/adminAccount/adminAccount'),
              name: 'adminAccount',
              meta: { title: '管理员账户管理' },
            },
            {
              path: 'menuList',
              component: () => import('@/views/permission/menuList/menuList'),
              name: 'menuList',
              meta: { title: '菜单列表' },
            },
            {
              path: 'adminRole',
              component: () => import('@/views/permission/adminRole/adminRole'),
              name: 'adminRole',
              meta: { title: '管理员角色' },
            },
            {
              path: 'adminRolePermission',
              component: () => import('@/views/permission/adminRolePermission/adminRolePermission'),
              name: 'adminRolePermission',
              meta: { title: '管理员角色权限' },
            },
          ],
        },
      ]
    });

### App.vue ###

<template>
      <div id="app">
        <router-view/>  //根据路由查询内容
      </div>
    </template>
    
    <script>
    import App from "./App.ts";
    export default App;
    </script>
    
    <style scoped>
    
    </style>

### Main ###

main.vue

<template>
      <div style="width:100%;height:100%">
        <div :style="{ width: siderWidth + 'px'}" class="sidebar-container">
          <siderBar :siderWidth="siderWidth" :isCollapse="isCollapse"></siderBar>
        </div>
    
        <div class="main-container" :style="{ width: mainWidth + 'px'}">
          <navBar @changeNav="onChange"></navBar>
          <div class="content">
            <router-view/>
          </div>
        </div>
    
        <div class="footer">
          <div style="text-align: center;">2016-{
       {year}} © XXXXX</div>
        </div>
      </div>
    </template>
    
    <style>
    body {
      margin: 0px;
      overflow-x: hidden;
    }
    
    .footer {
      width: 100%;
      background-color: #fff;
      z-index: 1;
      height: 30px;
      line-height: 30px;
    }
    
    .sidebar-container {
      float: left;
      /* display: inline-block; */
      position: relative;
      left: 0px;;
      height: 100%;
    }
    
    .main-container {
      position: relative; 
      display: inline-block;
      top:0px;
      min-height: 94%;
    }
    
    .content {
      margin-top: 60px;
      padding: 0px 10px 30px 0px;
      width: 100%;
    }
    </style>
    
    <script>
    import Main from "./main.ts";
    export default Main;
    </script>

main.ts

/**
     * @module views\main
     */
    import Vue from "vue";
    import Enumerable from "linq";
    import { Component } from "vue-property-decorator";
    import { IndexObject } from "@/types";
    import siderBar from "@/components/layout/siderBar";
    import navBar from "@/components/layout/navBar";
    import basicInformation from "@/views/basicData/enterpriseBasicInformation/basicInformation";
    
    @Component({
      components: { siderBar, navBar, basicInformation }
    })
    export default class Main extends Vue {
      private isCollapse = false;
      private mainWidth = 0;
      private siderWidth = 181;
      private year = (new Date()).getFullYear();
      mounted() {  
        this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;
      }
    
      private onChange() {
        if (this.isCollapse) {
          this.isCollapse = false;
          this.siderWidth = 181;
          this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;
          return;
        } else {
          this.isCollapse = true;
          this.siderWidth = 64;
          this.mainWidth = document.documentElement!.clientWidth - this.siderWidth;
          return;
        }
      }
    }

### 顶部导航栏 ###

navBar.vue

<template>
      <div class="navbar">
        <span @click="$emit('changeNav')" class="icon iconfont icon-queding"></span>
        <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
          <span v-if="item.redirect === 'noredirect' || index == breadcrumbs.length-1" class="no-redirect">{
       { item.meta.title }}</span>
            <a v-else @click.prevent="handleLink(item)">{
       { item.meta.title }}</a>
        </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="right-menu">
          <div style="display:inline-block;padding-right:20px">
            <span style="font-size:32px" class="icon iconfont icon-icon28"></span>
            <span>XXXX</span>
          </div>
          <span class="icon iconfont icon-shezhi"></span>
        </div>
      </div>
    </template>
    
    <style scoped>
    .navbar {
      position: fixed;
      height: 50px;
      padding: 0px 20px;
      border-bottom: 1px solid #ccc;
      line-height: 50px;
      width: 100%;
      overflow: hidden;
      background-color: #ffffff;
      z-index: 2;
    }
    
    .right-menu {
      display: inline-block;
      position: fixed;
      right: 10px;
    }
    
    .breadcrumb {
      display: inline-block;
      padding-left: 20px;
    }
    </style>
    
    <script>
    import NavBar from "./navBar.ts";
    export default NavBar;
    </script>

navBar.ts

/**
     * @module components\layout\navBar
     */
    import Vue from "vue";
    import { Component,Watch } from "vue-property-decorator";
    import { RouteRecord } from 'vue-router';
    import pathToRegexp from 'path-to-regexp';
    
    @Component
    export default class NavBar extends Vue {
        private breadcrumbs: RouteRecord[] = [];
    
        @Watch('$route')
        private onRouteChange() {
          this.getBreadcrumb();
        }
    
        created() {
            this.getBreadcrumb();
        }    
    
        private getBreadcrumb() {
            let matched = this.$route.matched.filter((item) => item.name);
            this.breadcrumbs = matched.filter((item) => {
              return item.meta && item.meta.title && item.meta.breadcrumb !== false;
            });
          }
    
          private pathCompile(path: string) {
            const { params } = this.$route;
            const toPath = pathToRegexp.compile(path);
            return toPath(params);
          }
    
          private handleLink(item: any) {
            const { redirect, path } = item;
            if (redirect) {
              this.$router.push(redirect);
              return;
            }
            this.$router.push(this.pathCompile(path));
          }
    }

### 侧导航栏 ###

siderBar.vue

<template>
        <div id="sidebar" :style="{ width: siderWidth + 'px'}" class>
          <el-menu
            router
            :default-active="active"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            :collapse="isCollapse"
            style="width:100%"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="icon iconfont icon-location iconStyle"></i>
                <span slot="title">基础数据</span>
              </template>
              <el-submenu index="1-1">
                <span slot="title">企业基本信息</span>
                <el-menu-item index="/basicData/enterpriseBasicInformation/basicInformation">企业基本资料</el-menu-item>
                <el-menu-item index="/basicData/enterpriseBasicInformation/organizationalStructure">组织架构</el-menu-item>
              </el-submenu>          
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="icon iconfont icon-location iconStyle"></i>
                <span slot="title">权限管理</span>
              </template>
              <el-menu-item index="/permission/adminAccount">管理员账户管理</el-menu-item>
              <el-menu-item index="/permission/menuList">菜单列表</el-menu-item>
              <el-menu-item index="/permission/adminRole">管理员角色</el-menu-item>
              <el-menu-item index="/permission/adminRolePermission">管理员角色权限</el-menu-item>
            </el-submenu>
          </el-menu>
      </div>
    </template>
    
    <style scoped>
    #sidebar {
      position: fixed;
      overflow-x: hidden;
      height: 100%;
      background-color: #545c64;
      z-index: 2;
    }
    
    .iconStyle {
      margin-right: 5px;
      font-size: 16px;
    }
    
    #sidebar::-webkit-scrollbar {
      width: 0px; /*滚动条宽度*/
    }
    
    #sidebar:hover::-webkit-scrollbar {
      width: 4px;
    }
    
    /*定义滚动条轨道 */
    #sidebar::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #545c64;
    }
    
    /*定义滑块*/
    #sidebar::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.2);
    }
    </style>
    
    <script>
    import SiderBar from "./siderBar.ts";
    export default SiderBar;
    </script>

siderBar.ts

/**
     * @module components\layout\siderBar
     */
    import Vue from "vue";
    import { Component, Prop, Watch } from "vue-property-decorator";
    
    @Component
    export default class SiderBar extends Vue {
      private active = "/basicData/enterpriseBasicInformation/basicInformation";
    
      @Prop({ default: false }) isCollapse!: boolean;
      @Prop({ default: "181" }) siderWidth!: string;
    
      mounted() {
        this.active = this.$route.path;
      }
    
      @Watch('$route')
      private onRouteChange() {
        this.active = this.$route.path;
      }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70]: /images/20220316/9816453ec95d4aefb5b3bb7664dad30c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70 1]: /images/20220316/81cc044cdaf14978a3dabdc93985ab61.png