android系统定制开发Vue+ELementUI主页布局----侧边栏布局（el-aside）

第一节Login.vueandroid系统定制开发登录表单知识：

 

具体地址：


 

目录

一、android系统定制开发布满整个页面

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

经过我们的筛选，我们发现是因为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

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

复习链接：

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'" >

最终实现效果

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发