Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
框架布局
本章只介绍基础布局，和一些主要的js，页面上基本上都是些交互事件，项目代码上都有注释，不懂的地方debug跑一变就知道了，只是这些事件基本上没有独立存在的，相互之间都有关联
框架风格
新建页面：/src/views/layout/layout.vue
<!-- layout.vue -->
<template>
<div id="loyout">
<el-container>
<layoutAside></layoutAside>
<el-container>
<layoutHeader></layoutHeader>
<el-main id="elmain">
<transition name="main" mode="out-in">
<router-view></router-view>
</transition>
</el-main>
<el-footer>
<Bottom></Bottom>
</el-footer>
</el-container>
</el-container>
</div>
</template>
aside 无限级菜单组件
新建页面：/src/views/layout/aside/aside.vue
<!-- aside.vue -->
<template>
<div>
<el-aside id="asideNav">
<div class="logo-name">
<p v-if="$store.getters.logoShow">XU</p>
<p v-else>vue-xuAdmin后台模板</p>
</div>
<!-- el-menu的属性查看官方文档 -->
<el-menu :default-active="$route.path" class="el-menu-vertical"
@select="selectmenu"
:collapse="$store.getters.isCollapse"
background-color="#03152A"
text-color="rgba(255,255,255,.7)"
active-text-color="#ffffff"
:router="$store.getters.uniquerouter"
:unique-opened="$store.getters.uniquerouter"
:collapse-transition="true"
>
<!-- 遍历根据权限生成的路由表生成菜单列表 -->
<template v-for="(item,index) in $store.getters.routers" v-if="!item.hidden">
<!-- 检查是否带有alone属性的一级菜单类似“主页”，还有子菜单的个数 -->
<el-submenu v-if="!item.alone && item.children.length>0" :index="index+''">
<template slot="title">
<!-- 如果没有设置图标将会采用默认图标‘fa fa-server’ -->
<i :class="item.iconCls?item.iconCls:[fa,fa-server]"></i>
<span slot="title">{{ $t(`routeNmae.${item.name}`) }}</span>
</template>
<!-- 子菜单组件 -->
<menu-tree :menuData="item.children"></menu-tree>
</el-submenu>
<!-- 一级菜单 -->
<el-menu-item :index="item.path" v-else>
<i :class="item.iconCls?item.iconCls:[fa,fa-file]"></i>
<span slot="title">{{ $t(`routeNmae.${item.name}`) }}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
</div>
</template>
点击菜单
// aside.vue
watch: {
// 监听浏览器直接输入路由，将此路由添加到tabnavBox
'$route.path': function (val) {
this.selectmenu(val)
}
},
// 点击菜单把当前菜单的name和path添加到tabNavBox容器，生成tabNav标签页菜单
selectmenu (key) {
// 获取当前权限路由表
let router = this.$store.getters.routers
let name = ''
// 查找路由的name属性
let navTitle = function (path, routerARR) {
for (let i = 0; i < routerARR.length; i++) {
if (routerARR[i].children.length > 0 || routerARR[i].path === path) {
if (routerARR[i].path === path && routerARR[i].children.length < 1) {
name = routerARR[i].name
break
}
// 递归查找
navTitle(path, routerARR[i].children)
}
}
return name
}
// tabNavBox添加数据
this.$store.dispatch('addTab', {
title: navTitle(key, router),
path: key
})
}
子菜单组件 menu-true
新建页面：/src/views/layout/aside/menuTree.vue
<!-- menuTree.vue -->
<template>
<div>
<template v-for="(child,index) in menuData">
<el-submenu v-if="child.children.length > 0" :index="child.path">
<template slot="title">
<i :class="child.iconCls?child.iconCls:[fa,fa-file]"></i>
<span slot="title">{{ $t(`routeNmae.${child.name}`) }}</span>
</template>
<!-- 通过递归 menu-tree 生成无限级菜单 -->
<menu-tree :menuData="child.children"></menu-tree>
</el-submenu>
<el-menu-item v-else :index="child.path">
<i :class="child.iconCls?child.iconCls:[fa,fa-file]"></i>
<span slot="title">{{ $t(`routeNmae.${child.name}`) }}</span>
</el-menu-item>
</template>
</div>
</template>
header头部
这里没啥好说的，都是html布局，tabnav接下来说， i18n后面会讲
新建页面：/src/views/layout/header/header.vue
<!-- header.vue -->
<template>
<div>
<el-header id="header">
<span class="hideAside" @click="collapse"><i class="fa fa-indent fa-lg"></i></span>
<ul class="personal">
<li class="fullScreen" @click="fullScreen">
<el-tooltip class="item" effect="dark" content="全屏" placement="bottom"><i
class="fa fa-arrows-alt fa-lg"></i></el-tooltip>
</li>
<li>
<langSelect></langSelect>
</li>
<li>{{ $t(`role.${this.$store.getters.info.role}`) }}</li>
<li>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
夏洛克丶旭<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">{{ $t('userDropdownMenu.basicInfor') }}</el-dropdown-item>
<el-dropdown-item command="b">{{ $t('userDropdownMenu.changePassword') }}</el-dropdown-item>
<el-dropdown-item command="logout" divided>{{ $t('userDropdownMenu.logout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<li class="icon"><img :src="avatar"/></li>
</ul>
</el-header>
<!-- tabNav 组件,标签页菜单 -->
<tabNav></tabNav>
</div>
</template>
tabNav 组件
这里的tabNav标签动画和页面的动画是一样的,都是官方的demo稍微改一下，，只不过页面有mode="out-in"所以动画时间需要快一点
新建页面：/src/views/layout/header/tabNav.vue
<!-- tabNav.vue -->
<template>
<div>
<div class="tabnavBox">
<transition-group name="list" tag="ul">
<!-- tabnavBox 是存储所有tabNav的数据容器，每次点击左侧菜单就会把数据添加到tabnavBox -->
<li v-for="(item, index) in $store.getters.tabnavBox" @contextmenu.prevent="openMenu(item,$event,index)"
:key="item.title" class="tabnav" :class="{ active: $route.path === item.path }">
<router-link :to="item.path">{{ $t(`routeNmae.${item.title}`) }}</router-link>
<i @click="removeTab(item)" class="el-icon-error" v-if="index !== 0"></i>
</li>
</transition-group>
</div>
<!-- 右击菜单 -->
<ul v-show="this.rightMenuShow" :style="{left:this.left+'px',top:this.top+'px'}" class="menuBox">
<li @click="removeTab($store.getters.rightNav)"><i class="fa fa-remove"></i>{{ $t('rightMenu.close') }}</li>
<li @click="removeOtherTab($store.getters.rightNav)">{{ $t('rightMenu.closeOther') }}</li>
<li @click="removeAllTab">{{ $t('rightMenu.closeAll') }}</li>
</ul>
</div>
</template>
系列文章
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理
