项目演示
https://www.bilibili.com/video/BV1dY411T71E?t=57.3
vue + element-ui 项目演示
二、项目实战二
Ⅰ、搭建 header 组件
1. header 左侧
- 引入菜单按钮,大小设置为 mini
- 引入下拉栏,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 右侧
- 动态添加图片
<!-- 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>
3. 左侧和右侧的 flex 布局
- 通过 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
- 创建 store 文件夹,在该文件夹下创建 index.js 文件,用来管理 vuex 的相关配置
import Vue from 'vue' import Vuex from 'vuex' import tab from './tab' import user from './user' // 全局使用Vuex Vue.use(Vuex) export default new Vuex.Store({ //模块化定义 modules:{ tab, user } })
- 在 store 文件夹下,定义 tab.js 文件
export default { // 用于存储具体的数据 state: { // menu是否展开,默认为展开 isCollapse: false, }, // 用来修改state中的数据 mutations: { collapseMenu(state){ state.isCollapse = !state.isCollapse //进行取反操作 } } }
- 在 CommonHeader.vue 中添加 handleMenu() 方法
handleMenu() { this.$store.commit('collapseMenu') }