03-主页

主页布局

1.整体布局

1. 到elemen-ui官网 寻找合适的布局 粘贴代码即可

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

2. 同样需要在element.js中按需导入需要的组件 并注册

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form } from 'element-ui'
import { FormItem } from 'element-ui'
import { Input } from 'element-ui'
import { Message } from 'element-ui'
import { Container } from 'element-ui'
import { Header } from 'element-ui'
import { Aside } from 'element-ui'
import { Main } from 'element-ui'

Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.prototype.$message = Message;

3. 为主页布局添加样式

<style lang="less" scoped>
.home-container{
  height: 100%;
}
.el-header {
  background-color: #373D41;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #EAEDF1;
}
</style>

2 header区域布局

1. 为头部区域添加logo、美化文字以及将退出按钮移至右侧

<!--    头部区域-->
    <el-header>
    <div>
      <img src="../assets/Umbrella.png" alt="logo">
      <span>电商后台管理系统</span>
    </div>
    <el-button type="info" @click="logout">退出</el-button>
    </el-header>

样式

.el-header {
  background-color: #373D41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
    >div {
      display: flex;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      span {
        margin-left: 15px;
      }
    }
}

效果

2 左侧菜单

1. 同样到element-ui官网寻找合适组件

梳理后

<el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b">
<!--          一级菜单-->
          <el-submenu index="1">
<!--            一级菜单模板区域-->
            <template slot="title">
<!--              图标-->
              <i class="el-icon-location"></i>
<!--              文本-->
              <span>导航一</span>
            </template>
<!--            二级菜单-->
            <el-menu-item index="1-4-1">
              <template slot="title">
                <!--              图标-->
                <i class="el-icon-location"></i>
                <!--              文本-->
                <span>导航一</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>

同样先到element.js中按需引入并挂载相应的组件

代码略

效果

3. 通过接口获取菜单数据

1. 通过axios请求拦截器添加token，保证拥有获取数据的权限

在axios挂载到vue原型对象上之前

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token');
  return config
});

2. 发起请求获取菜单数据

在home组件的data属性中先声明一个菜单数据

    data() {
        return {
            // 左侧菜单数据
            menuList: []
        }
    },

通过axios发起异步请求

  // 获取所有菜单数据
    async getMenuList() {
      const {data: res} = await this.$http.get('menus');
      if(res.meta.status !== 200) return this.$message.error('获取菜单数据失败!');
      this.menuList = res.data;
    }

在页面创建之后，数据挂载之前立即调用该方法获取数据

created() {
    this.getMenuList()
  },

3. 通过v-for循环绘制二级菜单

一级菜单

     一级菜单-->
<!--          此处index中拼接空格是因为:index只接受字符串-->
          <el-submenu :index="item.id + ' ' " v-for="item in menulist" :key="item.id">
<!--              文本-->
          <span>{{item.authName}}</span>

二级菜单

<!--            二级菜单-->
            <el-menu-item :index="subItem.id + '' " v-for="subItem in item.children" :key="subItem.id">
                <!--文本-->
            <span>{{subItem.authName}}</span>

效果

4. 设置选中颜色并添加分类图标

el-menu中的属性active-text-color就是选项点击后的颜色

active-text-color="#409EFF"

一级菜单模板图标的问题由icon-font图标解决 在data中声明一个图标对象 通过每一个item的id作为图标对象的键

//dat中的图标对象
iconsObj: {
                '125': 'iconfont icon-user',
                '103': 'iconfont icon-tijikongjian',
                '101': 'iconfont icon-shangpin',
                '102': 'iconfont icon-danju',
                '145': 'iconfont icon-baobiao'
            }
//类的绑定
<i :class="iconsObj[item.id]"></i>

5. 设置只能打开一个二级菜单并解决边框问题

element-ui中el-menu有一属性：

参数	说明
unique-opened	是否只保持一个子菜单的展开(布尔类型)

<el-menu
          :unique-opened="true"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF">

此时 侧边栏边框右边有若隐若现的突出:这是因为el-menu的border-right属性的原因 此时 将其重置为none即可

.el-menu {
    border-right: none;
  }

6. 实现侧边栏的展开与折叠

参数	说明
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）(布尔类型)

为菜单绑定该属性

在侧边栏前增加一个div 填充内容 增加样式 绑定点击事件

点击事件函数的逻辑为点击该div切换该属性的值

<div class="toggle-button" @click="toggleCollapse">|||</div>

样式

.toggle-button {
  background-color: #4A5064;
  font-size: 10px;
  line-height: 24px;
  color: white;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

点击事件的处理函数

// 实现侧边栏的折叠与展开
toggleCollapse() {
  this.isCollapsed = ! this.isCollapsed;
}

4 路由重定向

为el-main区域增加一个欢迎组件 当访问/home路由时，就会重定向到该组件

1. 首先在components文件夹下定义该组件

2. 然后在路由文件中导入该组件 并定义它的路由规则

{ path: '/home', component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome }
    ] }

3. 在el-main区域增加路由占位符

<!--      右侧内容主题-->
      <el-main>
        <router-view></router-view>
      </el-main>

5 侧边栏路由链接改造

element-ui为el-menu设置有router属性

参数	说明
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转(布尔类型)

此时 将二级菜单的index值改为subItem.path 但该属性前面没有/ 所以要手动补全

<!--            二级菜单-->
            <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id">