Vue写项目后台04 收缩菜单栏，全屏，头像，退出登录

Vue写项目后台04 收缩菜单栏，全屏，头像，退出登录

继上次的左边菜单栏这次加了头部，左边菜单栏收缩，和页面全屏，头像，退出登录。

首先看左边的菜单栏

在
中自带有:collapse属性，给他设置一个collapse的值

在export default{
}中设置data(){return{
collapse:false // 设置了collapse属性名的值为false
}}

这个口口使用的element-ui的字体图标
口口

<!-- 收缩左边菜单栏 -->
<div class="collapse-btn" @click="collapseChange">

因为左侧菜单栏的收缩由的一个属性控制，true为缩，false为展开
控制他的值即可完成目标
那么，怎么控制他的值了
菜单栏在TheAside.vue页面上，头部的收缩按钮在TheHeader.vue页面上
怎么控制了
用一个bus

在assets静态目录文件夹下新建一个bus.js文件
new Vue();给一个const常量相当于java的final取名叫bus，export default bus，将这个bus的Vue()对象导出，可供其他页面导入

在TheHeader.vue中

  <!-- 收缩左边菜单栏 -->
    <div class="collapse-btn" @click="collapseChange">
<i class="el-icon-menu"></i>
    </div>

使用@click=“collapseChange”点击事件

首先导入bus对象
在data里定义collapse:false，通过collapseChage()方法把false传给’collapse’事件，这个时候collapse:false
在TheAside.vue中

<template>
  <div class="sidebar">


<!-- element-ui 菜单组件 具体使用用法请参考百度 element-ui官网使用或百度el-menu-->
   <el-menu
   class="sidebar-el-menu"
   :default-active="onRoutes"
   :collapse="collapse"
   background-color="#324157"
   text-color="#ffffff"
   active-text-color="#20a0ff"
   unique-opened
   router
   >
   <!--
    class="sidebar-el-menu"  class样式
    :default-active="onRoutes" 默认的点击时的样式
    :collapse="collapse"  确定是否收缩
    background-color="#324157" el-menu的背景颜色
    text-color="#ffffff"  字体颜色
    active-text-color="#20a0ff" 点击后的字体颜色
    router 具有路由作用

    -->
      <template v-for="item in items">
        <template>
          <!-- el-menu-item是一级菜单组件 -->
          <el-menu-item :index="item.index" :key="item.index">
        <i :class="item.icon"></i>
        <span>        {