文章目录
1 整体布局
2 完成主页-侧边栏
2.1 实现基本的主页布局
- 在 element ui 官网 上查找合适的布局容器
Home.vue
<template>
<el-container class="home-container">
<!-- titlebar -->
<el-header>Header
<el-button type="primary" @click="logout">退出登录</el-button>
</el-header>
<!-- 正文区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 正文区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
- 导入element相关组件
element.js
import {Container, Header, Aside, Main } from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
- 绘制背景颜色
Home.vue
<style lang="less">
.home-container {
height: 100%;
}
.el-header {
background-color: #353d45;
}
.el-aside {
background-color: #64707d;
}
.el-main {
background-color: #dadee2;
}
</style>
2.2 美化主页header区域
- 插入图片，文字
<el-header>
<div>
<img src="../assets/logo.png" alt="" />
<span>电商管理系统</span>
</div>
<el-button type="primary" @click="logout">退出登录</el-button>
</el-header>
- 编写样式
.el-header {
background-color: #353d45;
display: flex; // 弹性布局
justify-content: space-between; // 左右贴边
padding-left: 0; // 左侧贴边
align-items: center; // 上下居中，该属性依赖 display: flex
color: #fff;
font-size: 20px;
div {
display: flex;
align-items: center;
span{
margin-left: 15px;
}
}
}
2.3 实现导航菜单的基本结构
- 在官网找到导航菜单的页面，选择对应的样式进行辅助
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#64707d">
<!-- 一级菜单 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-1">
<template slot="title">
<i class="el-icon-location"></i>
<span>选项一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
- 导入相关element组件
import {Menu, Submenu, MenuItem } from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
2.4 通过axios拦截器添加token令牌
在后端的接口文档中，注明需要授权的 API ，必须在请求头中使用 "Authorization" 字段提供 "token" 令牌
main.js
axios.interceptors.request.use(config=>{
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
2.5 获取左侧菜单数据
- 接口：menus
- 获取接口数据
<script>
export default {
data() {
return {
menuList: [],
};
},
// 周期函数，创建页面时调用该方法
created() {
this.getMenuList();
},
methods: {
logout() {
window.sessionStorage.clear();
this.$router.push("/login");
},
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;
},
},
};
</script>
2.6 通过for循环渲染左侧菜单
<!-- 一级菜单 -->
<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>
2.7 优化右侧菜单展示
- 选中后颜色设定
<el-menu background-color="#64707d" text-color="#fff" active-text-color="#00BFFF">
- 设二级菜单icon
<i class="el-icon-menu"></i>
- 设定一级菜单icon
<i :class="iconsObj[item.id]"></i>
iconsObj:{
'125':'el-icon-s-custom',
'103':'el-icon-s-opportunity',
'101':'el-icon-s-cooperation',
'102':'el-icon-s-order',
'145':'el-icon-data-line'
}
- 每次值展开一个菜单
使用menu的unique-opened属性
<el-menu background-color="#64707d" text-color="#fff" active-text-color="#00BFFF" unique-opened>
- 去除菜单展开后的毛刺
.el-aside {
background-color: #64707d;
.el-menu{
border-right: none;
}
}
2.8 实现侧边栏折叠与展开效果
- 创建控件并定义样式
<div class="toggle-button" >|||</div>
.toggle-button {
background-color: #5a636d;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em; // 字间距
cursor: pointer;
}
- 实现点击后展开或收起
创建点击方法
<div class="toggle-button" @click="toggleCollapse">|||</div>
设置变量控制展开或收起，并且关闭收起动效
<el-menu background-color="#64707d" text-color="#fff" active-text-color="#00BFFF" unique-opened :collapse="isCollapse" :collapse-transition="false">
设置变量记录展开或收起
return {
isCollapse: false,
};
实现对变量的控制
toggleCollapse() {
this.isCollapse = !this.isCollapse;
},
- 展开或收起展示不同的侧边栏宽度
<el-aside :width="isCollapse ? '64px' : '200px'">
2.9 首页路由的重定向效果
- 创建Welcome.vue页面
<template>
<div >
<h1>Welcome</h1>
</div>
</template>
- 路由文件添加welcome页面，并设置为home的子路由
import Welcome from '../components/Welcome.vue'
routes: [
{
path: '/home', component: Home, redirect: '/welcome', children: [
{ path: '/welcome', component: Welcome }
]
}
- Home中设置路由占位符
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
2.10 侧边栏路由链接改造
element的menu有个属性router可以自动将将导航的 index 作为 path 跳转。
router：是否使用vue-router的模式，启用该模式会在激活导航时以index作为 path 进行路由跳转
menu添加router属性
router为:router="true"的简写
<el-menu ... router >
<el-menu-item :index="'/' + subItem.path" ...>