系列文章目录
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>
data() {
return {
userImg: require("../assets/images/user.png"),
}
}
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')
}