vue + element

vue + element

后台管理系统项目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=".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 = truethis.$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; 就不会超出了。具体看：

雨过天晴，我还在等你。