进一步优化收缩菜单下拉菜单

iview · Sep 20, 2018 · 5ed857d · 5ed857d
1 parent 82b733a
commit 5ed857d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/view/main/components/side-menu/collapsed-menu.vue b/src/view/main/components/side-menu/collapsed-menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dropdown ref="dropdown" @on-click="handleClick" class="collased-menu-dropdown" :transfer="hideTitle" :placement="placement">
+  <Dropdown ref="dropdown" @on-click="handleClick" :class="hideTitle ? '' : 'collased-menu-dropdown'" :transfer="hideTitle" :placement="placement">
     <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/></a>
     <DropdownMenu ref="dropdown" slot="list">
       <template v-for="child in children">

diff --git a/src/view/main/main.less b/src/view/main/main.less
@@ -45,24 +45,31 @@
 .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
   margin-right: 8px !important;
 }
-.ivu-select-dropdown.ivu-dropdown-transfer{
-  max-height: 1000px;
-  & div.ivu-dropdown{
-    width: 100%;
-    margin: 0;
-    line-height: normal;
-    padding: 7px 0 6px 16px;
-    clear: both;
-    font-size: 12px !important;
-    white-space: nowrap;
-    list-style: none;
-    cursor: pointer;
-    transition: background 0.2s ease-in-out;
-    &:hover{
-      background: rgba(100, 100, 100, 0.1);
-    }
-    & * {
-      color: #515a6e;
-    }
+.collased-menu-dropdown{
+  width: 100%;
+  margin: 0;
+  line-height: normal;
+  padding: 7px 0 6px 16px;
+  clear: both;
+  font-size: 12px !important;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  &:hover{
+    background: rgba(100, 100, 100, 0.1);
+  }
+  & * {
+    color: #515a6e;
   }
+  .ivu-menu-item > i{
+    margin-right: 12px !important;
+  }
+  .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
+    margin-right: 8px !important;
+  }
+}
+
+.ivu-select-dropdown.ivu-dropdown-transfer{
+  max-height: 400px;
 }
diff --git a/src/view/main/main.vue b/src/view/main/main.vue
@@ -136,12 +136,12 @@ export default {
   },
   watch: {
     '$route' (newRoute) {
-      console.log(newRoute)
       this.setBreadCrumb(newRoute.matched)
       this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
     }
   },
   mounted () {
+    console.log(123123123131231)
     /**
      * @description 初始化设置面包屑导航和标签导航
      */