通用后台管理系统
该系统主要结合
Element
组件编辑前端,后端实现业务逻辑,组成一个简单的前后端分离项目。
该部分介绍面包屑功能的实现
页面
Element
也有这个组件,直接使用el-breadcrumb
<!--面包屑-->
<el-breadcrumb separator="/" >
<el-breadcrumb-item class="myColor" v-for="item in tags" :key="item.path" :to="{ path: item.path }">{
{item.label}}</el-breadcrumb-item>
</el-breadcrumb>
点击菜单功能
handleMenu() {
this.$store.commit('collapseMenu')
}
computed: {
// ... 解构
...mapState({
tags: state => state.tab.tabsList
})
}
顶栏
顶栏页面如下:左端有个菜单按钮,点击可以折叠左栏的菜单栏,右端放个小logo,当前所在页面高亮显示。
<template>
<div class="header-content">
<div class="l-content">
<el-button style="margin-right: 20px" @click="handleMenu" icon="el-icon-menu" size="medium"></el-button>
<!--面包屑-->
<el-breadcrumb separator="/" >
<el-breadcrumb-item class="myColor" v-for="item in tags" :key="item.path" :to="{ path: item.path }">{
{item.label}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="r-content">
<el-dropdown>
<span class="el-dropdown-link">
<img class="user" src="../static/logo.png" alt="">
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<style lang="less" scoped>
.header-content {
padding: 0 20px;
background: #333;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.text {
color: #fff;
font-size: 14px;
margin-left: 10px;
}
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.l-content{
display: flex;
align-items: center;
.myColor /deep/ .el-breadcrumb__inner {
color:#666;
}
/deep/.el-breadcrumb__item{
.el-breadcrumb__inner{
font-weight: normal;
}
// 伪类
&:last-child{
.el-breadcrumb__inner{
color: white;
}
}
}
}
}
</style>