基于element-ui的侧边栏及其使用方法
基于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; }