书接上回,上回我们介绍了前端项目常常用到的vue-router的配置,本文将介绍Vue通用后台管理项目实战的UI布局设计。
1、整体UI布局搭建
首先我们要实现的主页面整体的UI布局如下图所示:
我们是要完成这样一个页面布局,直接到element-ui官网上去找是否有这样的布局
我们发现上述布局满足我们的要求,因此直接复制对应的代码到我们的项目中:
最后效果:
2、左侧菜单栏的引入
对于上述左侧菜单栏实际上很容易发现是一个独立的模块,此时应该将其作为一个组件来编码,方便后期维护管理
首先到element-ui网站找到差不多的组件
在component文件夹创建commonAside.vue文件(一般组件文件都在在component文件夹下创建的),将复制好的代码粘贴进去
然后再Main.vue文件中导入commonAside.vue组件,然后调用:
效果:
3、一级菜单的实现
这里主要是对刚才复制的element-ui的代码进行修改,想要对这个代码进行修改,首先就要能够看懂上述代码,在element-ui网站对应位置有对上述代码中属性的介绍:
首先一般来说菜单上的标签,文字都应该是能够根据后端数据自动动态刷新的,这里我们暂时没有数据,因此这里直接自己定义一些数据menuData
代码如下所示
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<el-menu-item v-for = "item in noChildren" :key="item.name" :index="item.name">
<!-- 这里是动态的使用element-ui网站提供的图标 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<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-group>
</el-submenu>
</el-menu>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: false,
// 自定义数据menuData
menuData: [
{
path: "/",
name: "home",
label: "首页",
icon: "s-home",
url: "Home/home"
},
{
path: "/mall",
name: "mall",
label: "商品管理",
icon: "video-play",
url: "MallManage/MallManage"
},
{
path: "/user",
name: "user",
label: "用户管理",
icon: "user",
url: "UserManage/UserManage"
},
{
label: "其他",
icon: "location",
children: [
{
path: "/page1",
name: "page1",
label: "页面1",
icon: "setting",
url: "Other/PageOne"
},
{
path: "/page2",
name: "page2",
label: "页面2",
icon: "setting",
url: "Other/PageTwo"
}],
}
],
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
// 计算属性 对自定义数据进行筛选
computed: {
// 没有子菜单
noChildren() {
return this.menuData.filter(item => !item.children)
},
// 有子菜单
hasChildren() { return this.menuData.filter(item => item.children) }
}
}
</script>
注意上述图标是使用element-ui网站提供的图标:
想要使用上述图标,直接在组件中引用名称即可
OK 今天的内容就到这里,后面将会接着介绍二级菜单的实现,菜单样式和less引入,以及菜单点击跳转功能的实现,感谢各位看官看到这里,感兴趣的话,就点点关注,订阅一下专栏。