前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >基于element-ui的侧边栏及其使用方法

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

作者头像
GeekLiHua
发布2025-01-21 21:55:50
发布2025-01-21 21:55:50
7300
代码可运行
举报
文章被收录于专栏:JavaJava
运行总次数:0
代码可运行

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

基于element-ui的侧板栏。

效果展示

代码讲解

代码结构

代码语言:javascript
代码运行次数:0
复制
<!-- 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,包裹,这样才可以正常布局。

代码语言:javascript
代码运行次数:0
复制
.container {
  display: flex;
  height: 100vh;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-09-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于element-ui的侧边栏及其使用方法
    • 效果展示
    • 代码讲解
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档