Vue + Element-UI —— 项目实战（二）

系列文章目录

Vue + Element-UI —— 项目实战（零）（项目概述）

Vue + Element-UI —— 项目实战（一）

文章目录

二、项目实战二

Ⅰ、搭建 header 组件

1. header 左侧

1. 引入菜单按钮，大小设置为 mini

1. 引入下拉栏，trigger 设置点击时下拉

<!-- header的左侧，plain：menu按钮的类型（朴素按钮）--><div class="l-content"><el-button plain icon="el-icon-menu" size="mini"></el-button><h3 style="color: #fff">首页</h3></div>

2. header 右侧

1. 动态添加图片

<!-- header的右侧，trigger：触发下拉的行为 --><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>

data(){return{userImg:require("../assets/images/user.png"),}}

3. 左侧和右侧的 flex 布局

1. 通过 flex 布局书写样式，调整好布局

    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;height: 40px;
        border-radius:50%;}}

Ⅱ、vuex 实现左侧折叠

1. 安装 vuex

终端键入如下代码，安装 vuex3 版本

    npm i vuex@3

2. 配置和使用 vuex

1. 创建 store 文件夹，在该文件夹下创建 index.js 文件，用来管理 vuex 的相关配置

import Vue from'vue'import Vuex from'vuex'import tab from'./tab'import user from'./user'// 全局使用Vuex
    Vue.use(Vuex)exportdefaultnewVuex.Store({//模块化定义modules:{
            tab,
            user
        }})

1. 在 store 文件夹下，定义 tab.js 文件

exportdefault{// 用于存储具体的数据state:{// menu是否展开，默认为展开isCollapse:false,},// 用来修改state中的数据mutations:{collapseMenu(state){
            state.isCollapse =!state.isCollapse //进行取反操作}}}

1. 在 CommonHeader.vue 中添加 handleMenu() 方法

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