vue管理布局左侧菜单栏NavMenu

我们接着上回的写,我们写一下左侧的菜单

复制代码
<el-aside style="width: 200px;">
        <div
          style="height: 60px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
          logo
        </div>
        <el-menu>
          <el-menu-item>系统首页</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

这就是左侧的代码,我加了一点样式,因为正常的都是上面有一个logo,下面再写菜单栏,我们写一下这个el-menu

首先写一个el-menu,这个显然就是一级菜单,然后在里面写el-menu-item写出几项就可以了,然后我们再继续写二级菜单,就是el-submenu,这个东西吧,你可以在里面直接谢日el-menu-item,但是,你想在二级菜单上写字,就必须要用到template这个标签,然后就在里面添加slot属性,接着写一个图标➕一点字,就可以实现二级菜单的title了。

我们一级菜单也可以实现这样的效果

复制代码
<el-aside style="width: 200px;">
        <div
          style="height: 60px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
          logo
        </div>
        <el-menu>
          <el-menu-item>
            <template slot="title">
              <i class="el-icon-house"></i><span>系统首页</span>
            </template>
          </el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

我们写完了发现一个问题,就是右侧有一个下拉条,这个下拉条太丑了吧!我们得想办法给他弄掉

我们给el-aside设置一个最小高度就可以了min-width: 100vh;

我们还看到旁边还有一个边框也很难看,直接去掉!border: none

复制代码
<el-aside style="width: 200px;min-height: 100vh;">
        <div
          style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center;background-color: #ccc;color: white;">
          logo
        </div>
        <el-menu style="border: none;">
          <el-menu-item>
            <template slot="title">
              <i class="el-icon-house"></i><span>系统首页</span>
            </template>
          </el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-menu-item>系统首页</el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息管理</span>
            </template>
            <el-menu-item>系统首页</el-menu-item>
            <el-menu-item>系统首页</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

这样就可以去掉边框和下拉条了!

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端