vue + element-ui后台管理自己封装头部侧边栏组件

后台管理系统项目github一大堆，但是需求不一样，样式差距也大，而且github上基本都是完整的项目，研究代码都花费不少时间，不如这样，咱自己动手，gogogo…先封装头部组件：（效果图）html:<template><div class="header"><el-container class="main"><el-header class="main

心若向阳(*￣︶￣)

3462人浏览 · 2020-08-06 10:09:47

心若向阳(*￣︶￣) · 2020-08-06 10:09:47 发布

后台管理系统项目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

雨过天晴，我还在等你。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...