vue+elementUi——实现后台管理系统的布局(sideBar+header+appMain)

不念不忘少年蓝@ 2022-09-03 06:26 375阅读 0赞

在做后台管理系统时，最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
因此分析一下这个页面的结构：

## 1.`html`部分 ##

<template>
    	<div class="app-wrapper">
    		<div class="layout-aside" :class="{collapse:isCollapse}">
    			<div class="layout-logo">
    				<router-link to="/">
    					<img src="@/assets/logo.png" alt="logo"/>
    					<span v-show="!isCollapse">工业品超市管理后台</span>
    				</router-link>
    			</div>
    			<SideBar :collapse="isCollapse" />
    		</div>
    		<div class="layout-container" :class="{collapse:isCollapse}">
    			<div class="layout-header" :class="{collapse:isCollapse}">
    				<Header />
    			</div>
    			<div class="layout-main">
    				<AppMain />
    			</div>
    		</div>
    	</div>
    </template>

通过上面的布局，就展示了效果图中的三大部分，为了能够实现左侧菜单栏的折叠与隐藏，通过一个`isCollapse`来控制，这个变量主要控制的是左侧菜单栏的宽度及图标的显示与否。

## 2.`js`部分 ##

## 3.`css`部分 ##

## 4.`sideBar`组件部分 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
这个结构在`elementUi`中是有的，可以参考这个：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

#### 1.`html`部分 ####

<template>
    	<el-scrollbar class="sidebar-scroll">
    		<el-menu class="el-menu-vertical-demo" :router="true" :unique-opened="false" :collapse="isCollapse" :default-active="currentRouter" background-color="#304156" text-color="#fff" active-text-color="#409eff" style="border:none">
    			<template v-for="(item,index) in menuData">
    				<el-menu-item :key="index" :index="onlyOneChild.path" v-if="hasOneShowingChild(item.children,item)&&(!onlyOneChild.children||onlyOneChild.onShowingChildren)">
    					<i :class="onlyOneChild.meta.icon"></i>
    				</el-menu-item>
    				<el-menu-item :keey="index" :index="item.path" v-else>
    					<template slot="title">
    						<i :class="item.meta.icon"></i>
    						<span>{ { item.meta.title}}</span>
    					</template>
    					<template v-for="(subitem,j) in item.children">
    						<el-menu-item :index="subitem.path" :key="j" v-if="!subitem.hidden">
    							{ { subitem.meta.title}}
    						</el-menu-item>
    					</template>
    				</el-menu-item>
    			<template>
    		</el-menu>
    	</el-scrollbar>
    </template>

#### 2.`js`部分 ####

import { mapState,mapGetters} from "vuex";
    export default{ 
    	name:'SideBar',
    	computed:{ 
    		...mapGetters('setting',['firstMenu','subMenu','menuData']),
    		isCollapse:function(){ 
    			return this.$store.state.isCollapse;
    		}
    	}
    },
    props:{ 
    	collapse:{ 
    		type:Boolean,
    		default:false
    	}
    },
    data(){ 
    	this.onlyOneChild = null;
    	return { 
    		currentRouter:''
    	}
    },
    watch:{ 
    	$route(to,from){ 
    		this.currentRouter = to.path;
    	}
    },
    mouted(){ 
    	this.currentRouter = this.$route.path;
    	console.log(this.isCollapse);
    },
    methods:{ 
    	hasOneShowingChild(children=[],parent){ 
    		const showingChildren = children.filter(item=>{ 
    			if(item.hidden){ 
    				return false;
    			}else{ 
    				this.onlyOneChild = item;
    				return true;
    			}
    		});
    		if(showingChildren.length==1){ 
    			this.onlyOneChild = item;
    			return true;
    		}
    		if(showingChildren.length==0){ 
    			this.onlyOneChild = { ...parent,onShowingChildren:true};
    			return true;
    		}
    		return false;
    	}
    }

#### 3.`css`部分代码 ####

## 5.`header`组件部分 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

#### 1.`html`部分代码 ####

<template>
    	<div class="header-wrapper">
    		<div class="header-left">
    			<div class="open-icon" @click="handleCollapse">
    				<i class="el-icon-s-fold" v-show="!isMenuOpen"></i>
    				<i class="el-icon-s-unfoldd" v-show="isMenuOpen"></i>
    			</div>
    			<el-breadcrumb separator="/">
    				<template v-for="(item,index) in breadcrumbList">
    					<el-breadcrumb-item :key="index" v-if="item.meta.title" :to="{path:item.path}">
    					</el-breadcrumb-item>
    				</template>
    			</el-breadcrumb>
    		</div>
    		<div class="header-right">
    			<span class="header-user">{ { currentName}},欢迎回来</span>
    			<el-dropdown  trigger="click">
    				<span class="el-dropdown-line">
    					<img src="https://wpimg.wallstcn.com/f778738c-ef48-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" alt="avatar"/>
    					<i class="el-icon-arrow-down el-icon--right"></i>
    				</span>
    				<el-dropdown-menu slot="dropdown">
    					<el-dropdown-menu icon="el-icon-plus>修改密码</el-dropdown-menu>
    					<el-dropdown-menu icon="el-icon-circle-plus" @click.native="handleLogout">退出登录</el-dropdown-menu>
    				</el-dropdown-menu>
    			</el-dropdown>
    		</div>
    	</div>
    </template>

#### 2.`js`部分代码 ####

#### 3.`css`部分代码 ####

## 6.`appMain`组件部分 ##

#### 1.`html`部分 ####

#### 2.`js`部分 ####

#### 3.`css`部分 ####

## 7.`store/setting`里面的`menuData`部分 ##

export default{ 
    	namespaced:true,
    	state:{ 
    		menuData:[]
    	},
    	getters:{ 
    		menuData(state,rootState){ 
    			if(state.filterMenu){ 
    				const { permissions,roles} = rootState.accout;
    				return filterMenu(JSON.parse(JSON.stringfy(state.menuData)),permissions,roles)
    			}
    			return state.menuData;
    		},
    		firstMenu(state){ 
    			const { menuData} = state;
    			if(menuData.length>0&&!menuData[0].fullPath){ 
    				formatFullPath(menuData);
    			}
    			return menuData.map(item=>{ 
    				const menuItem = { ...item};
    				delete menuItem.children;
    				return menuItem
    			})
    		},
    		subMenu(state){ 
    			const { menuData,activateFirst} = state;
    			if(menuData.length>0&&!menuData[0].fullPath){ 
    				formatFullPath(menuData);
    			}
    			const current = menuData.find(menu=>menu.fullPath== activatedFirst);
    			return current && current.chilren||[]
    		}
    	},
    	mutations:{ 
    		setMenuData(state,menuData){ 
    			state.menuData = menuData;
    		}
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/095932cc2b4d4376af28e5dea46cbcf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/43ae74d1ae7144bdb2d8e7d5d7d71607.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/0235e658f59a486a891d543f2def822a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/62933b5f193f4952a92f552b0af0b4ec.png