37.(前端)菜单的展示
1.前端的左侧菜单栏展示
对于菜单栏,我们可以从element-ui官网中获取到展示的代码
1.1导入代码
<!-- src/compoents/Home.vue -->
<template>
<el-container class="home-container">
<el-header>
<div>
<img src="../assets/logo.png">
<span>电子后台管理系统</span>
</div>
<el-button type="primary" @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-4-1">
<i class="el-icon-location"></i>
<span>选项1</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
methods:{
logout (){
// 第一步,清除token
window.sessionStorage.clear()
// 第二步,跳转到登录页面
this.$router.push('/login')
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style lang="less" scoped>
// 整个组件
.home-container{
height: 100%;
}
// 界面顶
.el-header{
display: flex;
align-items: center; //居中操作
background-color: #409EFF;
justify-content: space-between;
color: #fff;
font-size: 20px;
img{
height: 50px;
width: 100px;
}
div{
display: flex;
align-items: center;
}
}
// 侧面
.el-aside{
background-color: #303133;
}
// 中间
.el-main{
background-color: #e4e7ed;
}
</style>
1.2引入相应的组件
// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui'
// import { Button } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Header)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.prototype.$msg = Message
效果展示
2.从后端填充菜单相对应的数据
通过使用v-for循环,遍历出当前目录下的数据,还有其子目录下的数据填充进去即可。
<!-- src/compoents/Home.vue -->
<template>
<el-container class="home-container">
<el-header>
<div>
<img src="../assets/logo.png">
<span>电子后台管理系统</span>
</div>
<el-button type="primary" @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<!-- 遍历传递数据给导航 -->
<el-submenu index="1" v-for=" item in menuList" :key="item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item index="1-4-1" v-for="subItem in item.children" :key="subItem.id">
<i class="el-icon-location"></i>
<span>{{subItem.name}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
// 存储导航数据
data () {
return {
menuList: []
}
},
// 创建时被执行的函数
created () {
this.getMenulist()
console.log(this.menuList);
},
methods:{
logout (){
// 第一步,清除token
window.sessionStorage.clear()
// 第二步,跳转到登录页面
this.$router.push('/login')
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
// 从后端中获取数据
// 由于我们想在他刷新页面时候就能够显示出来,所以得改为同步操作;不改的话就可能会找不到
async getMenulist () {
const {data: res} = await this.$axios.get('/api/menu')
// console.log(res.data);
this.menuList = res.data
// console.log(res.data);
}
}
}
</script>
<style lang="less" scoped>
// 整个组件
.home-container{
height: 100%;
}
// 界面顶
.el-header{
display: flex;
align-items: center; //居中操作
background-color: #409EFF;
justify-content: space-between;
color: #fff;
font-size: 20px;
img{
height: 50px;
width: 100px;
}
div{
display: flex;
align-items: center;
}
}
// 侧面
.el-aside{
background-color: #303133;
}
// 中间
.el-main{
background-color: #e4e7ed;
}
</style>