Vue实战开发--后台管理系统Vue+Element ui（5）

这一节 我们对资源样式进行整合，在src下assets下放入images、less文件夹，可以通过我的附件进行下载，或者通过链接网盘链接下载，随后布局Header，并且引入vuex实现侧边栏展开收起功能。本节课完成效果图如下：

项目资源：https://pan.baidu.com/s/1BbbjR5MgeVm4XVP7FQzJlA 提取码：9xnb

1.载入样式文件

在main.js中引入，注意目录不要错。

2.Header布局

在components文件夹下新建CommonHeader.vue文件，Header也是公共组件，除了登录注册页面任何页面都有Aside和Header组件。

我们使用element ui里的el-button标签，el-button里的图标是一个属性icon，为el-button设定三个属性 plain、icon、size。下拉菜单用Dropdown。更改Dropdown的span标签将图片改成我们的user.png。图片在script代码中使用require动态载入。下拉菜单有两项，分别是个人中心和退出。

//CommonHeader.vue文件

<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini"></el-button>
      <!-- 面包屑,鼠标经过变暗 -->
      <h3 style="color: #fff">首页</h3>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini" >
        <span>
          <img class="user" :src="userImg">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default ({
    data() {
        return{
            //动态引入图片
            userImg:require('../assets/images/user.png')
        }
    },
})
</script>

 这里分为两个盒子l-content、r-content。采用flex样式设计。

//CommonHeader.vue样式

<style lang="less" scoped>
    header{
        display: flex;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .l-content{
        display: flex;
        align-items: center;
        .el-button{
            margin-right: 20px;
        }
    }
    .r-content{
        .user{
            width: 40px;
            left: 40px;
            border-radius: 50%;
        }
    }
</style>

在Main中引入CommonHeader.vue组件，这三句即可。

 3.按钮展开收起功能实现

这里有一个重要点，CommonAside组件中侧边栏展开跟isCollapse的值有关，false为展开，true为收起。而按钮是CommonHeader组件中的元素，这里涉及到兄弟组件中的通信，用vuex实现（重要！！！）。

安装依赖npm i vuex@3.6.2。在跟目录新建store文件夹。在main.js中引入，引入的不是包而是store中的项目文件，并在Vue实例中加入store属性。

import store from '../store/index'

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

在store中新建index.js文件，引入vue和vuex，将vuex进行全局注入vue.use(Vuex)。创建Vuex.Store()实例，放入modules。存放会使用到的模块，这里使用到tab模块。这里引入tab并使用。

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'

Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        tab
    }
})

在store下新建tab.js文件，定义一个state，里面存放isCollapse的状态，默认是false，改变state需要定义mutations属性。在mutations属性中需要定义一个方法，collapseMenu方法，对isCollapse属性进行取反。

export default{
    state:{
        isCollapse:false
    },
    mutations:{
        collapseMenu(state){
            state.isCollapse = !state.isCollapse
        }
    }
}

在CommonAside中computed下新建isCollapse()，return state.iscollapse的状态。$store需要在全局注入的情况下才可以使用。

isCollapse(){
    return this.$store.state.tab.isCollapse
}

将原本写死的isCollapse注释掉。

接下来开始绑定button，在CommonHeader的el-botton标签下添加事件绑定，@click="handleMenu"。在methods中添加handleMenu方法

<el-button
@click="handleMenu"
plain icon="el-icon-menu"
size="mini"></el-button>

methods:{
      handleMenu(){
        this.$store.commit('collapseMenu')
      }
    }

至此，完成左侧导航栏的展开与收起。收起是会出现bug，出现字数太多无法过行的情况，这里对h3标签进行简单处理，使用三元表达式判断isCollapse的值是否是true，是1为收起，显示“后台”，是0显示完整名称。

<!-- <h3>通用后台管理系统</h3> -->
<h3>{{isCollapse ? '后台' : '通用后台管理系统'}}</h3>