基于element-ui的侧边栏及其使用方法

简介: 基于element-ui的侧边栏及其使用方法

基于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;
}

相关文章
|
9月前
|
Web App开发 前端开发 开发工具
SAP UI5 应用开发教程之四十三 - SAP UI5 自带的 Support Assistant 工具使用方法介绍
SAP UI5 应用开发教程之四十三 - SAP UI5 自带的 Support Assistant 工具使用方法介绍
|
9月前
|
Shell API
SAP UI5 navpopover Factory 的使用方法介绍
SAP UI5 navpopover Factory 的使用方法介绍
|
10月前
|
前端开发 容器
SAP UI5 里 FlexBox 的使用方法
SAP UI5 里 FlexBox 的使用方法
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
SAP UI5 控件 ObjectStatus 的使用方法介绍试读版
|
9月前
|
XML 开发框架 数据格式
SAP UI5 应用开发教程之五十七 - 基于 OData 注解的 Smart Field 使用方法学习试读版
SAP UI5 应用开发教程之五十七 - 基于 OData 注解的 Smart Field 使用方法学习试读版
SAP UI5 应用开发教程之五十七 - 基于 OData 注解的 Smart Field 使用方法学习试读版
|
9月前
|
Web App开发 前端开发 JavaScript
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
SAP UI5 OData 模型(V2) 的使用方法介绍
SAP UI5 OData 模型(V2) 的使用方法介绍
|
9月前
|
Web App开发 开发者
SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
|
9月前
|
Web App开发 开发框架 前端开发
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版