vue通用后台管理系统(二)
要实现的页面
二、整体ui的搭建
1. Container布局容器
使用element-ui中的Container布局容器进行整体ui的搭建:在element-ui中选取一个组件样式然后引入到main.vue组件中
(1)全局引入element-ui
(2)在main.vue中使用想要引入的Container布局容器代码
(3)基本页面布局的效果
Aside:菜单区(导航区),Header:标题区,Home:内容区
1.1 菜单区的实现
(1)左侧菜单栏的引入
利用element-ui中的组件库实现左侧菜单栏的引入:
注意:组件拆分:具有单一功能的页面将其拆分为单独的组件,这样可以方便后面代码的维护
所以,我们需要在components文件夹中新建CommonAside.vue组件,然后将在element-ui中选取的NavMenu导航菜单的代码部分复制进去,并进行格式的调整。
// src/components/CommonAside.vue
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
然后,在Main.vue组件中引入并使用CommonAside组件
最后呈现的结果如下:
(2)一级菜单的实现
左侧菜单分为两种:一种是有子菜单,另一种是没有子菜单----菜单层级
点击菜单栏的时候要进行高亮显示、菜单栏默认展开----要实现的功能
① 将菜单栏设置为默认展开
关于如何实现展开和折叠:查看element-ui官方文档(掌握在官方文档中查看引入组件标签中的属性Attribute)
② 修改导航栏的位置:将导航一和导航二进行交换,然后删除导航三和导航四部分
同时需要根据要实现的样式去修改引入的CommonAside.vue的样式,修改后的样式如下:
③渲染页面内容-数据分组
判断有没有子菜单,是根据有没有children来判断的
计算属性:数据不能写死,因为对于不同账号设置的权限可能不一样,需要调用数据接口去使用数据。所以数据是动态的,在数据发生变化时,需要根据依赖(依赖当前menuData的变化)去修改数据,此时需要使用计算属性
计算属性需要实现的功能:对数据进行过滤分组:一组是没有子菜单,一组是有子菜单
key:标识当前标签元素的唯一性
最后呈现的效果如下:
(3)二级菜单的实现
二级菜单和一级菜单一样:显示内容也是包含图标和数据内容----依旧使用element-ui组件
二级菜单与一级菜单的区别:二级菜单比一级菜单多了一个子菜单需要渲染
所以分别实现两级菜单的数据动态渲染即可,操作步骤同上
(4)菜单样式与less引入
① 调整风格:修改左侧菜单栏的字体和背景样式等-----element-ui
② 修改左侧菜单栏的高度:使其铺满整个页面
③ 引入less
下载less:npm i less@4.1.2 npm i less-loader@6.0.0 -----注意版本
引入less,并进行代码改写:(scoped:让样式只作用于当前部分)
设置h3(通用后台系统的相关样式、字体大小,左右边距等)
// 文字居中
text-align: center;
line-height: 48px;
font-size:16px;
font-weight: 400;
(5)菜单点击跳转功能实现
先配置相关路由组件,然后再在src/routes/index.js中引入路由
路由跳转:根据数据判断当前需要跳转的位置,所以需要传参--传入当前收到的数据Item
绑定点击事件:
重定向:当前跳转的路由的路径是"/"时,使其跳转到Home路由组件中:src/rputes/index.js
1.2 Header组件的实现
(1)header组件搭建与样式调整
问题:重复点击同一个路由进行跳转时会报错
解决方法:在进行路由跳转时进行判断:如果是跳转到当前路由则不跳转,如果不是则跳转
//编程式导航
//当页面的路由与跳转的路由不一致时才允许跳转
if (this.$route.path != item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
this.$router.push(item.path)
}
header组件搭建:①在components文件夹中创建CommonHeader.vue组件,并写一些基本样式
② 在Main.vue组件中引入header组件
③ 使用element-ui相关组件进行header组件的样式调整
//引入按钮、图标并进行size的属性设置
<el-button icon="el-icon-menu" size="mini"></el-button>
//设置按钮边距
padding: 0 20px;
//使按钮垂直居中:flex布局
display: flex;
justify-content: space-between;
align-items: center; //垂直居中
//左侧
<div class="l-content">
<el-button icon="el-icon-menu" size="mini"></el-button>
<!-- 面包屑 -->
<span class="text">首页</span>
</div>
.header-container {
padding: 0 20px;
background-color: #333;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center; //垂直居中
}
.text {
color:#fff;
font-size: 14px;
margin-left: 10px;
}
//右侧
<div class="r-content">
<el-dropdown>
<span class="el-dropdown-link">
<img class="user" src="../assets/images/user.png" alt="">
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%; //圆角
}
}
1.3 vuex实现左侧折叠
状态修改牵扯到两个组件的变化:组件通信---vuex(需要复习)
安装vuex:npm i vuex@3.6.2 ---注意版本
①创建store并将其挂载到vue上--模块化
②使用store:在header组件中加入点击事件,当点击button按钮时去触发state的修改,此时就需要调用mutations中的collapseMenu方法,然后进行state的状态修改
然后state的状态发生变化后,需要在aside组件获取变化后的state并使用
左侧折叠遗留问题:折叠之后的名称需要改变,同时header组件需要占满整个一行
第一个问题解决:
<h3>{{ isCollapse ? '后台':'通用后台管理系统' }}</h3>
第二个问题解决:
最终呈现效果: