Vue+ELementUI主页布局----侧边栏布局（el-aside）

港控/mmm° 2024-04-03 08:01 92阅读 0赞

第一节Login.vue登录表单知识：

[Element-UI+vue实现登录表单\_我爱布朗熊的博客-CSDN博客][Element-UI_vue_-CSDN]

具体Element-UI地址：

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

**目录**

一、布满整个页面

二、主页Header布局

三、主页左侧带单布局

四、axios请求拦截器添加token，保证拥有获取数据的权限

五、发起请求获取左侧菜单数据

六、左侧菜单UI绘制

6.1优化一级菜单

6.2当打开一个一级菜单后其他一级菜单关闭

6.3实现左侧菜单的折叠与展开功能

--------------------

## 一、布满整个页面 ##

如图所示，当我们使用UI库中的组件之后，发现我们导入的组件并不能布满全局，现在我们应该想办法解决

![673e8776b8e6497288cade6ae7166f06.png][]

经过我们的筛选，我们发现是因为el-container的原因没有布满全屏，现在我们应该来修改一下

而且这个container就是我们Home.vue组件中最外层的container。

![13b39c69a9e74038990ef0ccc79a9426.png][]

因为最外层的container比较特殊，我们特别的给她一个类名

<el-container class="home-container">
           
           <el-header>Header</el-header>
           
           <el-container>
                 
                 <el-aside width="200px">Aside</el-aside>
                 
                 <el-main>Main</el-main>
           </el-container>
       </el-container>

最终完成我们需要的效果

![074926f922ff48e7af0d0ed93446bb86.png][]

## 二、主页Header布局 ##

<template>
       <el-container class="home-container">
    
           
           <el-header>
               <div>
                  <img src="../assets/heima.png" alt="">
                  <span>电商后台管理系统</span>
               </div>
               
                <el-button type="info" @click="logout">退出</el-button>
           </el-header>
    
    
           
           <el-container>
                 
                 <el-aside width="200px">Aside</el-aside>
                 
                 <el-main>Main</el-main>
           </el-container>
    
    
       </el-container>
    </template>
    
    <script >
    
    export default{
      name:'Home',
    
       methods:{
        // 退出操作 
        logout(){
        // 清空token
         window.sessionStorage.clear()
        //  将登录页面转入到登录界面
        this.$router.push('/login')
        }
       }
    }
    </script>
    
    
    <style scoped lang="less">
        // 标签的名字就是类的名字
       .home-container{
        height: 100%;
       }
      .el-header{
         background-color: #373D41;
         display: flex;
         justify-content: space-between;
         padding-left: 0px;
        //  居中
         align-items:center;
        //  文本颜色
        color:#fff;
        // 文字大小
        font-size: 20px;
    
        // 给header中嵌套的div进行样式改造
        // 子代选择器
        >div{
          display:flex;
        //   纵向居中
          align-items:center;
    
        //   在给div中的span改造样式
           >span{
            margin-left: 20px;
           }
        }
      }
    
      .el-aside{
        background-color: #333744;
      }
    
      .el-main{
        background-color: #EAEDF1;
      }
    </style>

![1965e72a5856454eb30b03c4504f53a3.png][]

## 三、主页左侧带单布局 ##

我们要实现的效果就是下图中的效果 ：

![4a1f0b547116414a964a6ed43db944bb.png][]

其中一级菜单要用<el-submenu>标签，二级菜单要在一级菜单内，要使用<el-menu-item>

其中一级菜单使用<el-submenu>标签之后，还可以再在里面嵌套一个<el-submenu>标签标签作为二级菜单，再在二级菜单中加一个<el-menu-item>三级菜单

![2324a23be7444765aefbba0e9b593488.png][]

![f8615304c3db474e989cd1855e80acd2.png][]

在一级菜单或二级菜单中涉及标题的内容的时候可以使用span标签（指定菜单的文本）

其中的i标签就是来指定图标选项（就是文字左侧的小图标），具体情况如下图所示

我们也可以通过template标签给菜单指定图标i和文本span

![38fed0dd8a2844c2b634a3a7fa26e905.png][]

![0840f877e02340f2bd7d9df0947d5e1b.png][]

## 四、axios请求拦截器添加token，保证拥有获取数据的权限 ##

复习链接：

[axios——难点语法使用、拦截器的使用、取消请求功能演示\_我爱布朗熊的博客-CSDN博客][axios_-CSDN]

config就是请求对象，具体内容如下所示

![1ae012bfd7804b4d84ef8deaaac5e87e.png][]

.request就是一个请求拦截器，使用use函数为请求拦截器挂载一个回调函数

在发送请求时，会优先调用use函数

return config就说明给请求头做了一个预处理

![c17aa41f03554123a92ea4151cb7a118.png][]

下面的我们的操作要根据后台的API接口进行工作

![d5b62d07d1e84315b2df72a3538b0791.png][]

在main.js中做出添加拦截器的操作![315a5083689447108057b41cfe1d2dae.png][]

## 五、发起请求获取左侧菜单数据 ##

当我们一登录完成之后，就应该立即获取左侧菜单，在页面进行展示

![0243898a5caf4cfcab71e4ac9f255946.png][]

下图是res对象中的各种值

![5af70c47253c46db807150de59acd170.png][]

代码： 暂时还没有效果图，等到渲染完成之后效果图一起展示

export default{
      name:'Home',
      data(){
       return{
        // 左侧菜单数据
        menulist:[]
       }
      },
      created(){
            // 获取左侧所有菜单（我们自己定义的一个方法）
          this.getMenuList()
      },
    
       methods:{
            // 退出操作 
            logout(){
            // 清空token
            window.sessionStorage.clear()
            //  将登录页面转入到登录界面
            this.$router.push('/login')
            },
           
            // 获取所有的左侧菜单
            async getMenuList(){
            const {data:res} =  await this.$http.get('menus')
            if(res.meta.status !==200)
              return this.$message.error(res.meta.msg)
              //运行到这里说明成功了
              this.menulist = res.data 
            }
       },
    
    
    }

## 六、左侧菜单UI绘制 ##

我们在获取左侧侧边栏的数据的时候写过 this.menulist = res.data，且从下图中我们可以看出来，data就是一个一级菜单，通过children属性又嵌套了二级菜单,我们需要将其渲染到左侧侧边栏

我们将使用了两个for循环，第一个for循环遍历一级菜单，第二个for循环遍历二级菜单

![efb28dfc6c7d4ae2bbc5bf4419f07bd4.png][]

<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                     
                      
                      
                      <el-submenu  :index="item.id+''" v-for="item in menulist" :key="item.id">
                        
                        <template slot="title">     
                          
                          <i class="el-icon-location"></i>
                          
                          <span>{
       {item.authName}}</span>
                        </template>
    
                        
                        <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
                          <template slot="title">     
                          
                          <i class="el-icon-location"></i>
                          
                          <span>{
       {subItem.authName}}</span>
                        </template>
                        </el-menu-item>
    
                      </el-submenu>
                    </el-menu>

![78702e98ac184940a5db253f0cce011f.png][]

### 6.1优化一级菜单 ###

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409BFF">

<el-submenu  :index="item.id+''" v-for="item in menulist" :key="item.id">
                        
                        <template slot="title">     
                          
                          <i :class="iconsObj[item.id]"></i>
                          
                          <span>{
       {item.authName}}</span>
                        </template>

// 一级菜单栏的图标
        iconsObj:{
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao',
        }

让图片离右侧的文字稍微远一点

.iconfont{
        margin-right:10px;
      }

![45eb91981f03491eae7bbebbc0b15e59.png][]

###  ###

### 6.2当打开一个一级菜单后其他一级菜单关闭 ###

在ELement-UI文档中我们发现有这么一个unique-opened，是否只保持一个子菜单展开

unique-opened也可以写成 :unique-opened="true"

![2b1d043148bf4811b6f735e62aa7b5fe.png][]

![4aee0a1ba50d4987865fdbf79fc6a99d.png][]

### 6.3实现左侧菜单的折叠与展开功能 ###

翻看文档，发现有一个参数是collapse，可以完成我们的需求

记得是在<el-menu>标签上添加 :collapse="true"

![6a4fad032e4b4d06b2110e1dfc1c78d9.png][]

但是为了完成我们的需求，我们不能单单的写成上面那个样子，我们可以写成一个函，如下面所示：

![98f6b6e396204c8bb962ecb5790f48ec.png][]

// 默认是不折叠的
        isCollapse:false

// 点击按钮，切换菜单的折叠与展开
            toggleCollapse(){
              this.isCollapse = !this.isCollapse
            }

效果图：

![2db0e24fce1c4f48bdbd9c9a84cd18b2.png][]

![6007b3120c20487aa97911e1e3b6c40d.png][]

但是此时的效果并不是那么的完美，下图是我在一瞬家抓拍的，这个动画效果很不及时，我们下面就把这个动画效果给取消

![c9e4b15607d5477c924e3c14d02b4d4f.png][]

我们又了解到下面的属性

![5c45a4345bc94163ba7cca15f98cdd4e.png][]

![1e2391af9daf4f91a58564f3162a9b15.png][]

然后现在我们发现 其中卡顿的动画效果消失了，但是当我们折叠起来后，我们的el-aside侧边栏是固定的，导致左边栏并没有折叠起来，这怎么办呢？

很简单，改变最上面文本的样式，当折叠之后，动态获取宽度就好了

![8d9e01725cea4beaa148e0a796f97b21.png][]

我们将侧边栏的宽度进行修改，不再是固定的，宽度以我们下面的图标宽度为基准

<el-aside :width="isCollapse ?'64px':'200px'" >

最终实现效果

![1cf005922af4435cb8fa4f70f2299812.png][]

![43099980277b4020a50dc1398828a570.png][]

[Element-UI_vue_-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/127124540
[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/installation
[673e8776b8e6497288cade6ae7166f06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cbfde61c92c34aa3bf96cda6cb3ae22e.png
[13b39c69a9e74038990ef0ccc79a9426.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a36a3554ffd14b2885a8d8a975f5b257.png
[074926f922ff48e7af0d0ed93446bb86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/fa28e18ff45144acb1b93eddccd26397.png
[1965e72a5856454eb30b03c4504f53a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/08eb5397458a4059a81776844a3536e7.png
[4a1f0b547116414a964a6ed43db944bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4522cd2549cd4af29ce4aca610844776.png
[2324a23be7444765aefbba0e9b593488.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/36fc8f41a81543d99c44ddc3ceea63b0.png
[f8615304c3db474e989cd1855e80acd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8db1610c8742415780873bf3918d6614.png
[38fed0dd8a2844c2b634a3a7fa26e905.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e077d95f67b545a083a5a96c9eaf55d6.png
[0840f877e02340f2bd7d9df0947d5e1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4bdff51cf7664448a6f43fdd881b35fc.png
[axios_-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/127072928
[1ae012bfd7804b4d84ef8deaaac5e87e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7446322d05a7480eb86f799939e26f6e.png
[c17aa41f03554123a92ea4151cb7a118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a7f9c041b5654b0aa68f9ee77e59212e.png
[d5b62d07d1e84315b2df72a3538b0791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/88e358cbdba049828801361f2e96a79c.png
[315a5083689447108057b41cfe1d2dae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ae1f8c01d3294eff82974f92b087211b.png
[0243898a5caf4cfcab71e4ac9f255946.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c8daac0c6bad4559844f4a7b9c91d0b5.png
[5af70c47253c46db807150de59acd170.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a772e0b244cd4e32ab696c3e439a8ba9.png
[efb28dfc6c7d4ae2bbc5bf4419f07bd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a2bf524ef4a34b39b531f272e83256d1.png
[78702e98ac184940a5db253f0cce011f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5f7cac6bb01448dc84ce35751d95de83.png
[45eb91981f03491eae7bbebbc0b15e59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/10d2123118a2475f86429f0e56794dd1.png
[2b1d043148bf4811b6f735e62aa7b5fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e72ac0448735453888364d3033290b90.png
[4aee0a1ba50d4987865fdbf79fc6a99d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d04cc166ee67444398143d1e522b3145.png
[6a4fad032e4b4d06b2110e1dfc1c78d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/49fd156cd30549e0a2b8cbfc999263ef.png
[98f6b6e396204c8bb962ecb5790f48ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e8222cf8bec049dcb5865d5f000770aa.png
[2db0e24fce1c4f48bdbd9c9a84cd18b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/10818b33350a4d8e9645a00c0451345b.png
[6007b3120c20487aa97911e1e3b6c40d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/dd392f823263486487be61d4217ae6ae.png
[c9e4b15607d5477c924e3c14d02b4d4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/50b8e20427e242d6b915adece211a1ea.png
[5c45a4345bc94163ba7cca15f98cdd4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/eab2e7d07f3f474dbf4239819e90747b.png
[1e2391af9daf4f91a58564f3162a9b15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ea040d5009d64e29a0506e27d02ab954.png
[8d9e01725cea4beaa148e0a796f97b21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bc8409f060ee4915b142eb27ef6dca32.png
[1cf005922af4435cb8fa4f70f2299812.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c04ca9846d5c484981b4330c97e050cf.png
[43099980277b4020a50dc1398828a570.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d7cfcdec4fb04e0aa33abd34b7c57d61.png