element-ui的NavMenu置于顶部(mode="horizontal")时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)

element-ui的NavMenu置于顶部(mode=

说实话，写样式看似简单，其实有时候也会遇到很多坑。留下一笔，供参考（有点啰嗦，可以直接拖到最后看最后两行）。

这次是做一个PC端和移动端同时适用的项目，菜单的展示就成了一个问题。

　　于是我判断了用户设备（具体见本人的另一篇随笔：https://www.cnblogs.com/nuonuo-D/p/10516626.html），设了一个变量isMobi（移动端值为true,PC端值为false），菜单我用的是element-ui 的NavMenu，拟在pc端展示在页面左侧，移动端展示在页面顶部。也就是说，思路是这样：

　　　　isMobi?mode='horizontal':mode='vertical' （即移动端：NavMenu的模式为horizontal，pc端模式为vertical）

　　　　此外再调整相应的css

　　好了废话不多说，随着项目的迭代，菜单从原先的三个变成了六七个，移动端一屏已经无法显示。于是我就想着让它出滚动条。

　　本来以为单纯加个overflow-x:auto就能解决了，结果发现并不能。

　　经过几次尝试，得到的解决方法：

　　代码(快捷阅读：看红色文字即可)：

<template>
  <div class="sidebar-top">
    <el-menu
      :mode="mode"
      :collapse-transition="false"
      :default-active="onRoutes"
      v-bind:router="true"
      background-color="#3b3b3b"
      text-color="#fff"
      :unique-opened="true"
      menu-trigger="click"
      active-text-color="#20a0ff">
      <template>
        <el-menu-item index="/index">
          <span slot="title">首页</span>
        </el-menu-item>
      </template>
      <template>
      <el-submenu index="1">
        <template slot="title">
          <span>一级菜单1</span>
        </template>
        <el-menu-item index="/url1" >二级菜单1</el-menu-item>
      </el-submenu>
    </template>
      <template>
        <el-submenu index="2">
          <template slot="title">
            <span >一级菜单2</span>
          </template>
          <el-submenu index="2-1" :popper-append-to-body="true" >
            <span slot="title">带三级菜单的二级菜单</span>
            <el-menu-item index="/url">三级菜单1</el-menu-item>
            <el-menu-item index="/url">三级菜单2</el-menu-item>
          </el-submenu>
        </el-submenu>
      </template>
      <template>
        <el-submenu index="3">
          <template slot="title">
            <span>一级菜单3</span>
          </template>
          <el-menu-item index="/url1" >二级菜单1</el-menu-item>
          <el-menu-item index="/url2" >二级菜单2</el-menu-item>
        </el-submenu>
      </template>
      <template>
        <el-submenu index="4">
          <template slot="title">
            <span>一级菜单4</span>
          </template>
          <el-menu-item index="/url1" >二级菜单1</el-menu-item>
        </el-submenu>
      </template>
      <template>
        <el-submenu index="5">
          <template slot="title">
            <span>一级菜单5</span>
          </template>
          <el-menu-item index="/url1" >二级菜单1</el-menu-item>
        </el-submenu>
      </template>
      <template>
        <el-menu-item index="/url1">
          <span slot="title">一级菜单6</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<!--注：设置:popper-append-to-body="true" 可以防止三级菜单跑到屏幕外面去-->

　　样式(快捷阅读：看红色文字即可)：

<style>
  .sidebar-top{
    background-color: #3b3b3b;
    height: 55px;
    overflow-x: auto;
  }
  .sidebar-top > ul {
    /* 840px;*//*带icon的*/
     530px;/*不带icon的*/
  }
  .sidebar-top .el-menu--horizontal>.el-menu-item {
    height: 55px;
    line-height: 55px;
  }
  .sidebar-top .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 55px;
    line-height: 55px;
  }
  .sidebar-top .el-submenu .el-menu-item {
    min- 160px;
  }
  .sidebar-top .el-menu--collapse .el-menu .el-submenu,.el-menu--popup {
    min- 100px;
  }
  .el-submenu__icon-arrow {
    margin-top: -4px;
  }

  .el-submenu .el-menu-item {
    min- 80px;
  }
  .iconfont{
    font-size: 20px;
  }

</style>

总结：代码放了很多，因为本人说事情可能下意识的想全面点（代码可以直接复制看效果），所以不够精简，关键点只有几个：

　　1.el-menu的父容器加上属性：overflow-x: auto;

　　2.el-menu设好宽度，这个宽度的大小约为所有二级菜单宽度之和

element-ui的NavMenu置于顶部(mode="horizontal")时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)

相关推荐