vue后台管理系统(二)

466 阅读2分钟

经过login页面跳转,跳转成功后,跳转到table页面。

img

Home.vue组件

这个组件的用户登录成功后所有页面(除404页面外),所有页面的公共部分组件

layui布局

官网布局: element-cn.eleme.io/#/zh-CN/com… 此页面的代码布局结构

img
img
vue 知识体系:github.com/sunseekers/… mounted是el实例挂在之后,才开始从存储中读取用户信息的数据,再渲染到页面上。 结构功能中的两个重要的功能点:侧边栏(包括log)的展开与收起、鼠标经过昵称或头像时展开一些操作。

侧边栏的展开与收起

收起后的效果:

img
实现原理:

需要一个参数来存放状态(collapsed),初始值为false; 再通过三元运算符,动态控制class的值;通过{{collapsed?'':sysName}}控制log名 通过点击某个元素控制collapsed的值。 (点击事件@click.prevent=“collapse”)??此处的点击事件为什么没有native?? 事件函数:collapse:function(){this.collapsed=!this.collapsed;}, 在本个实例中,创建导航菜单和导航菜单折叠两个样式,再通过collapsed参数,控制显示折叠与展开,但是此处不能使用v-show,这个方法知识隐藏元素,当折叠后,会改变原导航菜单的宽度会在行内样式中自动添加宽度样式,如果替换成v-if就没有这个问题了。

鼠标经过时展开内容

用到了element中的drapdown(下拉菜单) element-cn.eleme.io/#/zh-CN/com… 退出登录的操作方法:

img

侧边栏部分:

侧边栏渲染

展开时

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