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

最新推荐文章于 2023-02-23 13:18:08 发布

aaaaaaddddsssss

最新推荐文章于 2023-02-23 13:18:08 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/aaaaaaddddsssss/article/details/113742589

版权

该博客介绍了如何使用Vue和Element-UI实现后台管理界面的功能，包括菜单栏的收缩和展开、全屏切换、头像展示以及退出登录的实现方法。通过事件总线（bus）来处理不同组件间的通信，控制菜单栏的折叠状态，并提供了全屏功能的简单实现。此外，还展示了头像的显示以及退出登录的UI组件使用。

摘要由CSDN通过智能技术生成

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>        {
   {
   item.title}}</span>
          </el-menu-item>
          <!-- 循环遍历items数组内容 -->
        </template>
      </template>
    </el-menu