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>

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

相关推荐
江城开朗的豌豆5 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆19 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山27 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45336 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^37 分钟前
条件渲染 v-show与v-if
前端