devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：运维做开发 | 2024-08-12 22:26:19

赞

踩

el-aside

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

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

具体Element-UI地址：

Element - The world's most popular Vue UI framework
 

目录

一、布满整个页面

二、主页Header布局

三、主页左侧带单布局

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

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

六、左侧菜单UI绘制

6.1优化一级菜单

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

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

一、布满整个页面

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

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

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

 

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

  1.    <el-container class="home-container">
  2.        <!--头部  -->
  3.        <el-header>Header</el-header>
  4.        <!-- 页面主体区  嵌套容器  包裹 Aside与Main -->
  5.        <el-container>
  6.              <!-- 左侧 -->
  7.              <el-aside width="200px">Aside</el-aside>
  8.              <!-- 主体 -->
  9.              <el-main>Main</el-main>
  10.        </el-container>
  11.    </el-container>
  1.  
  2. <style scoped lang="less">
  3.     // 标签的名字就是类的名字
  4.    .home-container{
  5.     height: 100%;
  6.    }
  7.   .el-header{
  8.      background-color: #373D41;
  9.   }
  10.  
  11.   .el-aside{
  12.     background-color: #333744;
  13.   }
  14.  
  15.   .el-main{
  16.     background-color: #EAEDF1;
  17.   }
  18. </style>

最终完成我们需要的效果

二、主页Header布局

  1. <template>
  2.    <el-container class="home-container">
  3.  
  4.        <!--头部  -->
  5.        <el-header>
  6.            <div>
  7.               <img src="../assets/heima.png" alt="">
  8.               <span>电商后台管理系统</span>
  9.            </div>
  10.            <!-- 退出按钮 -->
  11.             <el-button type="info" @click="logout">退出</el-button>
  12.        </el-header>
  13.  
  14.  
  15.        <!-- 页面主体区  嵌套容器  包裹 Aside与Main -->
  16.        <el-container>
  17.              <!-- 左侧 -->
  18.              <el-aside width="200px">Aside</el-aside>
  19.              <!-- 主体 -->
  20.              <el-main>Main</el-main>
  21.        </el-container>
  22.  
  23.  
  24.    </el-container>
  25. </template>
  26.  
  27. <script >
  28.  
  29. export default{
  30.   name:'Home',
  31.  
  32.    methods:{
  33.     // 退出操作 
  34.     logout(){
  35.     // 清空token
  36.      window.sessionStorage.clear()
  37.     //  将登录页面转入到登录界面
  38.     this.$router.push('/login')
  39.     }
  40.    }
  41. }
  42. </script>
  43.  
  44.  
  45. <style scoped lang="less">
  46.     // 标签的名字就是类的名字
  47.    .home-container{
  48.     height: 100%;
  49.    }
  50.   .el-header{
  51.      background-color: #373D41;
  52.      display: flex;
  53.      justify-content: space-between;
  54.      padding-left: 0px;
  55.     //  居中
  56.      align-items:center;
  57.     //  文本颜色
  58.     color:#fff;
  59.     // 文字大小
  60.     font-size: 20px;
  61.  
  62.     // 给header中嵌套的div进行样式改造
  63.     // 子代选择器
  64.     >div{
  65.       display:flex;
  66.     //   纵向居中
  67.       align-items:center;
  68.  
  69.     //   在给div中的span改造样式
  70.        >span{
  71.         margin-left: 20px;
  72.        }
  73.     }
  74.   }
  75.  
  76.   .el-aside{
  77.     background-color: #333744;
  78.   }
  79.  
  80.   .el-main{
  81.     background-color: #EAEDF1;
  82.   }
  83. </style>

三、主页左侧带单布局

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

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

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

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

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

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

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

复习链接：

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

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

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

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

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

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

 在main.js中做出添加拦截器的操作

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

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

下图是res对象中的各种值

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

  1. export default{
  2.   name:'Home',
  3.   data(){
  4.    return{
  5.     // 左侧菜单数据
  6.     menulist:[]
  7.    }
  8.   },
  9.   created(){
  10.         // 获取左侧所有菜单（我们自己定义的一个方法）
  11.       this.getMenuList()
  12.   },
  13.  
  14.    methods:{
  15.         // 退出操作 
  16.         logout(){
  17.         // 清空token
  18.         window.sessionStorage.clear()
  19.         //  将登录页面转入到登录界面
  20.         this.$router.push('/login')
  21.         },
  22.        
  23.         // 获取所有的左侧菜单
  24.         async getMenuList(){
  25.         const {data:res} =  await this.$http.get('menus')
  26.         if(res.meta.status !==200)
  27.           return this.$message.error(res.meta.msg)
  28.           //运行到这里说明成功了
  29.           this.menulist = res.data 
  30.         }
  31.    },
  32.  
  33.  
  34. }

六、左侧菜单UI绘制

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

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

  1.                 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
  2.                  
  3.                   <!-- 一级菜单 -->
  4.                   <!-- :index="item.id" 如果不这么写，当我们点击以及菜单的时候，所有的以及菜单都会打开
  5.                        添加一个空白字符串的原因就是这个地方index只要字符串 -->
  6.                   <el-submenu  :index="item.id+''" v-for="item in menulist" :key="item.id">
  7.                     <!-- 一级菜单的模板区域 -->
  8.                     <template slot="title">     
  9.                       <!-- 图标 -->
  10.                       <i class="el-icon-location"></i>
  11.                       <!-- 一级导航名称 -->
  12.                       <span>{{item.authName}}</span>
  13.                     </template>
  14.  
  15.                     <!-- 二级菜单 -->
  16.                     <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
  17.                       <template slot="title">     
  18.                       <!-- 图标 -->
  19.                       <i class="el-icon-location"></i>
  20.                       <!-- 一级导航名称 -->
  21.                       <span>{{subItem.authName}}</span>
  22.                     </template>
  23.                     </el-menu-item>
  24.  
  25.                   </el-submenu>
  26.                 </el-menu>

6.1优化一级菜单

  1.   <!--background-color="#333744" 导航栏背景颜色
  2.  text-color="#fff"  一级菜单字体的颜色
  3.  active-text-color="#ffd04b" 点击二级菜单之后显示的字体颜色-->
  4. <el-menu background-color="#333744" text-color="#fff" active-text-color="#409BFF">
  5.                  
  1.                   <!-- 一级菜单 -->
  2.                   <!-- :index="item.id" 如果不这么写，当我们点击以及菜单的时候，所有的以及菜单都会打开
  3.                        添加一个空白字符串的原因就是这个地方index只要字符串 -->
  4.                   <el-submenu  :index="item.id+''" v-for="item in menulist" :key="item.id">
  5.                     <!-- 一级菜单的模板区域 -->
  6.                     <template slot="title">     
  7.                       <!-- 图标 -->
  8.                       <i :class="iconsObj[item.id]"></i>
  9.                       <!-- 一级导航名称 -->
  10.                       <span>{{item.authName}}</span>
  11.                     </template>
  1.     // 一级菜单栏的图标
  2.     iconsObj:{
  3.       '125':'iconfont icon-user',
  4.       '103':'iconfont icon-tijikongjian',
  5.       '101':'iconfont icon-shangpin',
  6.       '102':'iconfont icon-danju',
  7.       '145':'iconfont icon-baobiao',
  8.     }

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

  1.   .iconfont{
  2.     margin-right:10px;
  3.   }

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

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

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

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

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

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

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

  1.     // 默认是不折叠的
  2.     isCollapse:false
'
运行
  1.         // 点击按钮，切换菜单的折叠与展开
  2.         toggleCollapse(){
  3.           this.isCollapse = !this.isCollapse
  4.         }

 效果图：

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

我们又了解到下面的属性

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

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

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

  1.              <!-- 侧边栏区域 -->
  2.              <el-aside :width="isCollapse ?'64px':'200px'" >

最终实现效果

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/971886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号