文章目录
1.顶部左侧布局
1.1菜单折叠图标
左侧菜单栏布局写好后,就要写右侧顶部布局,首先写这个图标,在element-ui中找到图标,然后在el-header标签中 (详情请见 手把手教你用vue(x)写后台管理系统(一)的页面布局)加入对应的字体图标 比如:el-icon-s-fold
<el-header class="layout-header">
<div class="header-left">
<div class="collapse">
<i class="el-icon-s-fold"></i>
</div>
</div>
</el-header>
1.2 刷新图标
此外,在折叠图标的右边应有一个刷新图标,又因为这两个图标在一起,可以起一个相同的类名
<!-- 折叠 -->
<div class="header-icon collapse">
<i class="el-icon-s-fold"></i>
</div>
<!-- 刷新 -->
<div class="header-icon refresh">
<i class="el-icon-refresh"></i>
</div>
然后加上一些样式
.header-left{
display: flex;
height: 100%;
align-items:center;
}
.header-icon{
color:#515a6e;
width:42px;
height: 100%;
line-height:60px;
text-align: center;
}
/* 鼠标放在图标上时的样式 */
.header-icon:hover{
background:#f8f8f9;
cursor: pointer;
}
1.3 点击图标实现菜单折叠效果
在element-ui中找到对应效果
style样式不能省
1.3.1.折叠后的宽度
先给Menu.vue中的el-menu标签加上collapse属性,表示折叠
<el-menu collapse>
这时的页面
感觉很奇怪,宽度不太好看,这时就要在index.vue中把el-aside标签的宽度 256px 改为 auto,让他自适应
<!-- 侧边栏容器 -->
<el-aside class="aside" width="auto">
<Menu></Menu>
</el-aside>
效果
不过呢,菜单折叠效果应该是 折叠后也有宽度,而上面的效果把菜单名字都覆盖了,我们就要用到它的样式了,顺便把刚才给menu标签添加的collpase 再删掉
/* :not 意思是说,当有后面括号里面的类名,宽度就不生效,没有的话生效,作用于菜单的折叠效果 */
.layout-menu:not(.el-menu--collapse) {
width: 256px;
min-height: 400px;
}
再看效果
折叠前:
折叠后:
2.改变折叠的状态
2.1 给折叠添加状态效果
这是就要用到vuex相关属性了
2.1.1
在menu.vue中给menu标签绑定一个
:collapse="menuCollapse"
接着
import {mapState} from 'vuex'
export default {
computed:{
...mapState(['menuCollapse'])
}
};
</script>
还要在router/index.js中
export default new Vuex.Store({
state: {
menuCollapse:false //折叠状态
},
mutations: {
// setMenuCollapse(state,status){
// state.menuCollapse=status 或者
toggleMenuCollapse(state){
state.menuCollapse=!state.menuCollapse
}
}
效果:
勾选改变状态后
2.1.2 给折叠添加点击事件
首先要添加一个点击事件给折叠图标的div
<!-- 折叠 -->
<div class="header-icon collapse" @click="toggleMenuCollapse">
<i class="el-icon-s-fold"></i>
</div>
<script>
//引入mapMutations,
import {mapMutations} from 'vuex'
export default {
components:{
},
methods:{
...mapMutations(['toggleMenuCollapse'])
}
}
</script>
效果:点击折叠图标 展开,再点 合并
2.2 点击变换折叠图标
在Layout/index.vue中 两个图标,一个表示折叠,一个是展开
添加一个判断,判断图标的状态是哪个
<!-- 折叠 -->
<div class="header-icon collapse" @click="toggleMenuCollapse">
<i :class="menuCollapse? 'el-icon-s-unfold' :'el-icon-s-fold' "></i>
</div>
接着
computed:{
...mapState(['menuCollapse'])
}
效果:展开时
折叠时
3.面包屑
同样是在 element-ui中找到相应的面包屑组件,复制粘贴
3.1 新建Breadcrumb.vue面包屑路由
在路由了复制粘贴,并删除不需要的代码
<template>
<!-- 面包屑 -->
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="route in routes" :key="route.path">
{
{ route.meta.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
computed: {
routes() {
return this.$route.matched;
},
},
created() {
console.log(this.$route);
},
};
</script>
设置一下面包屑之间的距离
<style>
.bread {
margin-left: 10px;
}
</style>
3.2 重定向(redirect)和自定义(meta)
我们点击Dashboard是应该直接进入主控台的路由,不然会显得很鸡肋,可以用自定义 meta:{}
点击主控台、监控页、工作台时,面包屑显示对应的菜单名字而不是路由,所以要给它们的路由重定向 用 redirect:
其它菜单栏同理修改meta和redirect
{
path:'/dashboard',
component:Layout,
redirect:'./dashboard/console' ,//重定向,
meta:{ //自定义
name:'Dashboard'
},
children:[
// console、monitor、workplace
{
path:'/dashboard/console' ,//控制台路由
component:()=>import('@/views/Dashboard/Console'),
meta:{
name:'控制台'
},
},
{
path:'/dashboard/monitor' ,//监控页路由
component:()=>import('@/views/Dashboard/Monitor'),
meta:{
name:'监控页'
},
},
{
path:'/dashboard/workplace' , // 工作台路由
component:()=>import('@/views/Dashboard/Workplace'),
meta:{
name:'工作台'
},
}
]
},
效果
4.菜单路由渲染
菜单渲染是个难点,先把菜单路由放在一起,在router/index.js中导出
export const menuRoutes=[
]
把菜单路由放进这里面【Dashboard路由和系统管理的路由】
然后
const routers=[
...menuRoutes, //单独拿出来的目的是去渲染菜单,因为routes这个路由是必须要生效的,所以把...menuRoutes放在这里
]
接着,我们要把以前写在Menu.vue
的部分菜单标签删掉,让他能自动渲染生成
<template>
<!-- 开启路由router模式 -->
<el-menu
:collapse="menuCollapse"
:default-active="$route.fullPath"
router
class="layout-menu"
text-color="rgba(255,255,255,0.7)"
active-text-color="#fff"
background-color="#191a23">
<!-- 二级菜单 利用menuRoutes来渲染对应的菜单-->
<el-submenu :index="parentRoute.path" v-for="parentRoute in menuRoutes" :key="parentRoute.path">
<template v-slot:title>
<!-- 相关图标 -->
<!-- <i class="el-icon-s-platform"></i> -->
<span>{
{parentRoute.meta.name}}</span>
</template>
<template v-for="childRoute in parentRoute.children">
<el-menu-item v-if="childRoute.meta && !childRoute.meta.hidden" :key="childRoute.path" :index="parentRoute.path + '/'+childRoute.path">
<!-- <i class="el-icon-menu"></i> -->
<template v-slot:title>{
{childRoute.meta.name}}</template>
</el-menu-item>
</template>
</el-submenu>
</el-menu>
</template>
<script>
import {mapState} from 'vuex'
import {menuRoutes} from '@/router' // 引入我们的菜单
export default {
computed:{
menuRoutes(){
return menuRoutes
},
...mapState(['menuCollapse'])
}
};
</script>
5.最终效果图