vue + element-ui后台管理自己封装头部侧边栏组件
后台管理系统项目github一大堆，但是需求不一样，样式差距也大，而且github上基本都是完整的项目，研究代码都花费不少时间，不如这样，咱自己动手，gogogo…先封装头部组件：（效果图）html:<template><div class="header"><el-container class="main"><el-header class="main
·
后台管理系统项目github一大堆，但是需求不一样，样式差距也大，而且github上基本都是完整的项目，研究代码都花费不少时间，不如这样，咱自己动手，gogogo…
先封装头部组件：（效果图）
html:
<template>
<div class="header">
<el-container class="main">
<el-header class="mainHeader">
<div class="header_left">
<span class="header_title">易洞察</span>
</div>
<div class="header_right">
<div class="search">
<i class="el-icon-search"></i>
</div>
<div class="notice">
<i class="el-icon-bell"></i>
</div>
<div class="avatar">
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="el-avatar"></el-avatar>
</div>
<div class="user">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
周慕云（Max）<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>我的钱包</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
</el-container>
</div>
</template>
这部分主要看自己的项目的ui图布局就好了
sass:
.header {
background: #fff;
margin-bottom: 10px;
box-shadow: 0px 0px 8px 0px rgba(63,32,135,0.08);
.main {
height: 60px; // 头部组件高度
.mainHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 40px 0px 60px;
height: 60px;
.header_left {
.header_title {
color: #3F2087;
font-size: 22px;
font-weight: 600;
}
}
.header_right {
display: flex;
align-items: center;
.search {
margin-right: 40px;
.el-icon-search {
font-size: 18px;
color: #1a1a1b;
}
}
.notice {
margin-right: 60px;
.el-icon-bell {
font-size: 18px;
color: #1a1a1b;
}
}
.avatar {
margin-right: 12px;
.el-avatar {
height: 30px;
width: 30px;
}
}
.user {
cursor: pointer;
.el-dropdown-link {
color: #1a1a1b;
font-size: 16px;
outline: none;
}
}
}
}
}
}
至此，头部组件完成
封装侧边栏组件：（收缩展开功能是重点）效果图如下：
html:
<template>
<div class="aside">
<!-- :collapse="isCollapse" 缩放类名添加移除控制 -->
<el-menu :collapse="isCollapse" class="asideBox">
<el-submenu index="1" class="noIcon">
<template slot="title">
<img src="../assets/aside/lunbotu.png" alt="">
<span>轮播图管理</span>
</template>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<img src="../assets/aside/project.png" alt="">
<span>项目管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">项目管理1</el-menu-item>
<el-menu-item index="2-2">项目管理2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<img src="../assets/aside/hetong.png" alt="">
<span>合同管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">合同管理1</el-menu-item>
<el-menu-item index="3-2">合同管理2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<img src="../assets/aside/wuliu.png" alt="">
<span>物流管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">物流管理1</el-menu-item>
<el-menu-item index="3-2">物流管理2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<img src="../assets/aside/user.png" alt="">
<span>用户管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">客户管理</el-menu-item>
<el-menu-item index="3-2">管理员管理</el-menu-item>
<el-menu-item index="3-1">标签管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 控制缩放图标 -->
<div class="showAside">
<img src="../assets/aside/open.png" alt="" @click="isClose" v-if="isCollapse">
<img src="../assets/aside/close.png" alt="" @click="isOpen" v-else>
</div>
</el-menu>
</div>
</template>
这是html部分，注意注释的两个地方就好
js：
methods: {
// 收缩状态下点击图标打开
isClose () {
this.isCollapse = false
// 传值给父组件，告知状态
this.$emit('func', false)
},
// 正常状态下点击图标收缩
isOpen () {
this.isCollapse = true
this.$emit('func', true)
}
}
因为我的缩放图标是在侧边栏上，所以触发的方法也是在这个组件，需要传值给父组件才能知道是否触发了缩放
sass:
.aside {
// 使用定位，不然内容区域宽度动态改变不了
position: absolute;
top: 0px;
left: 0px;
margin-right: 10px;
// 这是没有收缩的样式
.asideBox:not(.el-menu--collapse) {
width: 200px !important;
min-height: 500px;
background:rgba(255,255,255,1);
box-shadow:0px 0px 8px 0px rgba(63,32,135,0.08);
border-radius:0px 10px 0px 0px;
}
// 这是收缩后的样式
/deep/ .el-menu--collapse {
width: 80px !important;
min-height: 500px;
background: rgba(255,255,255,1);
box-shadow: 0px 0px 8px 0px rgba(63,32,135,0.08);
border-radius: 0px 10px 0px 0px;
}
/deep/ .el-menu {
border-right: none;
.noIcon {
/deep/ .el-submenu__title {
/deep/ .el-submenu__icon-arrow {
display: none;
}
}
}
/deep/ .el-submenu {
text-align: left;
/deep/ .el-submenu__title {
padding: 0px 20px 0px 30px;
img {
margin-right: 24px;
}
span {
color: #888;
font-size: 16px;
}
.el-submenu__icon-arrow {
right: 20px;
top: 56%;
}
}
}
/deep/ .el-menu-item {
min-width: 100px;
font-size: 16px;
color: #c3c3c3;
padding-left: 60px !important;
}
.showAside {
text-align: left;
padding-left: 20px;
margin-top: 100px;
}
}
}
好啦，头部组件和侧边栏组件封装完成 ，下一步，放到父组件以及布局样式
html:
js：
css:
父组件这边就不复制代码了，相信很多同学都会的啦
遇到几个问题：
1、习惯了从上往下以及flex布局，或者说习惯了用ui库里的组件，各种样式调式很辛苦
2、缩放本来很简单的布局，可是el-aside行内样式固定300px, 缩放的时候不变，所以没效果
3、后续想着把内容样式也封装了，直接调整数据区域样式就好，加油！
修改
真的对不起，后面在项目中出现了问题： 如图：
就是内容区域刚开始是正常显示的，但是收缩，然后展开的时候就会出现这种情况。解决办法为：
// 正常状态下表格区域布局
.main {
width: 100%;
overflow: hidden; // 添加此属性
margin-left: 210px;
}
在main类名下加overflow: hidden; 就不会超出了。具体看： https://blog.csdn.net/ppx2017/article/details/81612
雨过天晴，我还在等你。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献35条内容
所有评论(0)