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" 这个代码的作用就是展开对应路由的页面所对应的侧边栏选项，选中当前选择路由。不仅是初始加载页面的效果，也是当收起和展开菜单会出现的效果。

最后

以上就是背后发箍为你收集整理的vue实战之vue后台管理系统（三）之公共样式组件的全部内容，希望文章能够帮你解决vue实战之vue后台管理系统（三）之公共样式组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。