框架佈局
本章只介紹基礎佈局，和一些主要的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 手寫許可權管理系統後臺模板（二）——許可權管理