Sfoglia il codice sorgente

菜单过长换行样式

zhouna 6 anni fa
parent
commit
d3375e7fbd
2 ha cambiato i file con 9 aggiunte e 2 eliminazioni
  1. 8 1
      src/components/common/Menu.vue
  2. 1 1
      src/less/common.less

+ 8 - 1
src/components/common/Menu.vue

@@ -12,7 +12,7 @@
                     <i class="el-icon-location"></i>
                     <span>{{item.name}}</span>
                 </template>
-                <el-menu-item v-for="(sub,i) in item.subMenuList" :index="'/'+role+'/'+sub.code">{{sub.name}}</el-menu-item>
+                <el-menu-item v-for="(sub,i) in item.subMenuList" :index="'/'+role+'/'+sub.code"><p>{{sub.name}}</p></el-menu-item>
             </el-submenu>
         </template>
     </el-menu>
@@ -41,6 +41,13 @@
 </script>
 
 <style lang="less" scoped>
+    .el-menu-item p{
+        display: table-cell;
+        vertical-align: middle;
+        white-space: normal;
+        line-height: 20px;
+        height: 50px;
+    }
   /*.el-menu-vertical-demo {
     min-width: 300px;
   }*/

+ 1 - 1
src/less/common.less

@@ -7,7 +7,7 @@
 /*公共变量*/
 @disableColor: #ccc;
 @aside-width: 20%;
-@aside-min-width:245px;
+@aside-min-width:270px;
 @header-height: 60px;
 @gray: #c9c9c9;
 @baseBackage: #dee2ea;