目前菜单项为静态生成
界面截图
路由设置
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;
}
}