基于element-ui的侧板栏。
代码结构
<!-- TabbarLeftView.vue -->
<template>
<el-aside width="200px">
<el-menu
default-active="1"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
>
<el-submenu index="1">
<template slot="title">攻略管理</template>
<el-menu-item index="/">攻略列表</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">发布攻略</template>
<el-menu-item index="/orders">发布攻略</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
</template>
<style>
.el-aside {
background-color: #545c64;
color: #fff;
padding-top: 20px;
}
</style>
使用的时候需要注意,需要加上一个container属性的div,包裹,这样才可以正常布局。
.container {
display: flex;
height: 100vh;
}