效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Document</title>
</head>
<body>
<div id="app">
<el-container class="main">
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '200px'">
<el-menu
background-color="#2f4050"
text-color="#cccccc"
active-text-color="#fff"
:collapse="isCollapse"
:collapse-transition="false">
<!-- 1 -->
<el-submenu index="1">
<template slot="title">
<i class="iconfont el-icon-menu"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item class="menusmall" index="1-1">选项1</el-menu-item>
<el-menu-item class="menusmall" index="1-2">选项2</el-menu-item>
</el-submenu>
<!-- 导航2 -->
<el-menu-item index="2">
<i class="iconfont el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="iconfont el-icon-menu"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="iconfont el-icon-menu"></i>
<span slot="title">导航四</span>
</el-menu-item>
<el-menu-item index="5">
<i class="iconfont el-icon-menu"></i>
<span slot="title">导航五</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 内容 -->
<el-container>
<!-- nav -->
<el-header>
<!-- Header -->
<el-row type="flex" justify="space-between" style="text-align: left;">
<!-- 左侧 -->
<el-col :span="12" ><el-button @click="toggleCollapse">展开</el-button></el-col>
<!-- 右侧 -->
<el-col :span="12">1</el-col>
</el-row>
</el-header>
<!-- 主题区域 -->
<el-main>
<!-- Main -->
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// 创建路由对象
new Vue({
el: '#app',
data: function() {
return {
// 是否折叠
isCollapse: false, }
},
methods: {
// 点击按钮切换菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
},
}
})
</script>
<style scoped>
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.el-header {
background-color: #fff;
color: #333;
text-align: center;
line-height: 60px;
}
/* 侧边栏 */
.el-aside {
background-color: #2f4050;
/* color: #fff; */
/* text-align: center; */
height:100vh;
/* 撑满全屏 line-height: 100vh; */
}
.el-menu {
border-right: none;
}
.menusmall {
font-size: 12px;
margin-left: 10px;
}
.iconfont {
margin-right: 10px;
}
.el-main {
background-color: #f3f3f4;
color: #333;
text-align: center;
line-height: 160px;
}
.el-footer {
height: 30px!important;
background-color: #fff;
}
</style>