目录
一、整体布局
先上下划分,再左右划分。
跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式
<el-container>
<!-- 头部区域 -->
<el-header>Header<el-button type="info" @click="logout">退出</el-button></el-header>
<!-- 页面主题区 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体 -->
<el-main>Main</el-main>
</el-container>
</el-container>
.home-container {
height: 100%;
}
.el-header{
background-color:#373D41;
}
.el-aside{
background-color:#333744;
}
.el-main{
background-color:#eaedf1;
}
二、整体进一步细化
1.头部布局
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
.el-header{
background-color:#373D41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
> div {
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}
2.左侧菜单布局
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff"
active-text-color="#ffd04b">
<!-- 一级菜单 -->
<el-submenu index="1">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-4-1">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
3.通过接口获取菜单数据
通过添加axios请求拦截器来添加token,以保证拥有获取数据的权限
//请求在到达服务器之前,先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
//为请求头对象,添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem("token")
return config
})
4.发起请求获取左侧菜单数据
data() {
return {
//左侧菜单数据
menulist: []
}
},
created() {
this.getMenuList()
},
// 获取所有的菜单
async getMenuList() {
const {data: res} = await this.$http.get('menus')
if(res.meta.status !== 200) return this.$message.error(res.meta.msg);
this.menulist = res.data
console.log(res)
}
5.左侧菜单UI绘制
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>{
{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>{
{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
6.左侧菜单的优化
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff"
active-text-color="#409EFF" :unique-opened="true">
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{
{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{
{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
data() {
return {
//左侧菜单数据
menulist: [],
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
}
}
},
7.左侧菜单的折叠和展开功能
<div class="toggle-button" @click="toggleCollapse">|||</div>
//点击按钮,切换菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
<el-aside :width="isCollapse ? &#