vue實戰之vue後臺管理系統（三）之公共樣式組件

經過login頁面跳轉，跳轉成功後，跳轉到table頁面。

Home.vue組件

這個組件的用戶登錄成功後所有頁面(除404頁面外），所有頁面的公共部分組件

layui佈局

官網布局： http://element-cn.eleme.io/#/zh-CN/component/layout
此頁面的代碼佈局結構：

圖片和暱稱的加載

<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar"/> 
	{{sysUserName}}
</span>

mounted() {
	var user = sessionStorage.getItem('user');
	if (user) {
		user = JSON.parse(user);
		this.sysUserName = user.name || '';
		this.sysUserAvatar = user.avatar || '';
	}
}

vue 知識體系：https://github.com/sunseekers/Vue
mounted是el實例掛在之後，纔開始從存儲中讀取用戶信息的數據，再渲染到頁面上。
結構功能中的兩個重要的功能點：側邊欄（包括log）的展開與收起、鼠標經過暱稱或頭像時展開一些操作。

側邊欄的展開與收起

收起後的效果：

實現原理：

• 需要一個參數來存放狀態（collapsed），初始值爲false；
• 再通過三元運算符，動態控制class的值；通過{{collapsed?'':sysName}}控制log名
• 通過點擊某個元素控制collapsed的值。
  （點擊事件@click.prevent=“collapse”）？？此處的點擊事件爲什麼沒有native？？
  事件函數：collapse:function(){this.collapsed=!this.collapsed;},
• 在本個實例中，創建導航菜單和導航菜單摺疊兩個樣式，再通過collapsed參數，控制顯示摺疊與展開，但是此處不能使用v-show，這個方法知識隱藏元素，當摺疊後，會改變原導航菜單的寬度會在行內樣式中自動添加寬度樣式，如果替換成v-if就沒有這個問題了。

鼠標經過時展開內容

用到了element中的drapdown（下拉菜單） http://element-cn.eleme.io/#/zh-CN/component/dropdown
退出登錄的操作方法：

logout: function () {
	var _this = this;
	this.$confirm('確認退出嗎?', '提示', {
		//type: 'warning'
	}).then(() => {
		sessionStorage.removeItem('user');
		_this.$router.push('/login');
	}).catch(() => {
	});
},

側邊欄部分：

側邊欄渲染

展開時

<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
	<el-submenu :index="index+''" v-if="!item.leaf">
		<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
		<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
	</el-submenu>
	<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>

通過遍歷路由來，實現側邊欄效果（但我覺得這個在其他組件多的時候，這個方法還是不好的），不需要用來生成側邊欄導航的路由組件則通過添加一個屬性（hidden：true），再通過for循環遍歷生成時，添加一個條件語句（v-if="!item.hidden"），判斷，當路由屬性不是隱藏時，將對應組件渲染到菜單欄上。
有一些菜單沒有鑲嵌子菜單，有一些菜單包含子菜單。
所以，就需要通過條件判斷生成哪個菜單樣式( v-if="!item.leaf")，判斷是否是最末的節點。
通過:index屬性確定對應菜單的跳轉路由（:index=“child.path”）；

收起時

<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
	<template v-if="!item.leaf">
		<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
			<i :class="item.iconCls"></i>
		</div>
		<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
			<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
		</ul>
	</template>
	<template v-else>
		<li class="el-submenu">
			<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)">
				<i :class="item.iconCls"></i>
			</div>
		</li>
	</template>
</li>

這塊代碼沒有什麼新的知識點部分，主要是當移動到每個菜單時，如果有子菜單的話，會彈出子菜單來。

初始加載頁面時

:default-active="$route.path" 這個代碼的作用就是展開對應路由的頁面所對應的側邊欄選項，選中當前選擇路由。不僅是初始加載頁面的效果，也是當收起和展開菜單會出現的效果。