菜单栏有两级结构,是嵌套的容器(每一级菜单具有图标+文本)
i指定图标 span指定文本
与前面相同 需要注册再使用(在element.js中)
import Vue from 'vue'
/* 需要按需导入 */
import {
Button, Form, FormItem, Input, Message,Container,Header,Aside,Main,Menu,MenuItem,
MenuItemGroup,
Submenu
} from 'element-ui'
/* 需要注册成为全局可用 的中间件 */
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message // 需要全局挂载
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
<!-- 侧边栏菜单区域 -->
<!-- 背景颜色 -->
<el-menu background-color="#333744" 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">
<template slot="title">
<!-- 二级菜单图标 -->
<i class="el-icon-location"></i>
<!-- 二级菜单文本 -->
<span>导航一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
<template>
<el-container class="home-container">
<!-- el-header头部区域 -->
<el-header>
<div>
<img src="../assets/home页面.jpg" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- el-container主体区域 -->
<el-container>
<!-- el-aside侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<!-- 背景颜色 -->
<el-menu background-color="#333744" 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">
<template slot="title">
<!-- 二级菜单图标 -->
<i class="el-icon-location"></i>
<!-- 二级菜单文本 -->
<span>导航一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- el-main右侧内容 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
methods: {
logout(){
window.sessionStorage.clear()
this.$router.push('/login')//重定向到登录页面
}
},
}
</script>
<style lang="less">
.home-container{
/* 实现全屏 */
height: 100%;
}
.el-header{
background-color: #343d41;
display: flex;
justify-content: space-between;/*此时会留有空白*/
padding-right: 20px;
align-items: center;/*按钮上下居中*/
/*文本*/
color: #fff;
font-size: 20px;
>div{
/*文本居中*/
display: flex;
align-items:center;
span{
margin-left: 15px;
}
}
}
.el-aside{
background-color: #333744;
}
.el-main{
background-color: #eaedf1;
}
</style>