element-ui的NavMenu置於頂部(mode="horizontal")時,讓菜單可以滾動(overflow-x:auto)(主要用於移動端的菜單顯示)

說實話，寫樣式看似簡單，其實有時候也會遇到很多坑。留下一筆，供參考（有點啰嗦，可以直接拖到最后看最后兩行）。

這次是做一個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 {
    /*width: 840px;*//*帶icon的*/ width: 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-width: 160px;
  }
  .sidebar-top .el-menu--collapse .el-menu .el-submenu,.el-menu--popup {
    min-width: 100px;
  }
  .el-submenu__icon-arrow {
    margin-top: -4px;
  }

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

</style>

 總結：代碼放了很多，因為本人說事情可能下意識的想全面點（代碼可以直接復制看效果），所以不夠精簡，關鍵點只有幾個：

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

　　2.el-menu設好寬度，這個寬度的大小約為所有二級菜單寬度之和