提交

src/layout/components/Sidebar/SidebarItem.vue

@@ -2,8 +2,8 @@
   <div v-if="!item.hidden">
     <template v-if="item.showFather !== 'true' && hasOneShowingChild(item.children,item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <div class="menuTitle" :style="{borderLeft: isHome(item.children) ? '10px #2C333A solid' : '', borderRight: '10px #2C333A solid'}">
-          <el-menu-item style="" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+        <div class="menuTitle">
+          <el-menu-item style="" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}" @click="closeMenuItem(resolvePath(onlyOneChild.path))">
             <!--            <div :class="{'childMenu':onlyOneChild.meta.title !== '平台首页;Home Page'}" style="display: flex;">-->
             <item
               :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
@@ -75,6 +75,13 @@ export default {
     }
   },
   methods: {
+    closeMenuItem(item) {
+      console.log(item)
+      if (item === '/Home') {
+        console.log(1)
+        this.$emit('closeMenu')
+      }
+    },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {

src/layout/components/Sidebar/index.vue

@@ -3,6 +3,7 @@
     <logo v-if="true" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
+        ref="myMenu"
         :default-active="activeMenu"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
@@ -12,7 +13,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="(route, index) in permission_routes" :collapse="isCollapse" :key="index" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="(route, index) in permission_routes" :collapse="isCollapse" :key="index" :item="route" :base-path="route.path" @closeMenu="closeMenu"/>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -23,7 +24,6 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-
 export default {
   components: { SidebarItem, Logo },
   computed: {
@@ -50,6 +50,11 @@ export default {
       console.log('asdfasdfasdf', !this.sidebar.opened)
       return !this.sidebar.opened
     }
+  },
+  methods: {
+    closeMenu() {
+      this.$refs.myMenu.close(this.$refs.myMenu.openedMenus[0])
+    }
   }
 }
 </script>

src/styles/sidebar.scss

@@ -236,16 +236,16 @@
 .el-menu-item.submenu-title-noDropdown:hover {
   color: #FFFFFF !important;
 }
-.el-submenu {
-  border-left: 10px #2C333A solid;
-  border-right: 10px #2C333A solid;
-  transition: all 188ms linear;
-}
+//.el-submenu {
+//  border-left: 10px #2C333A solid;
+//  border-right: 10px #2C333A solid;
+//  transition: all 188ms linear;
+//}
 
 .el-submenu.is-opened {
   background-color: #FFFFFF !important;
-  border-left: 10px #fff solid;
-  border-right: 10px #fff solid;
+  //border-left: 10px #fff solid;
+  //border-right: 10px #fff solid;
 
   > .el-submenu__title {
     background-color: #FFFFFF !important;
@@ -262,9 +262,9 @@
       //white-space: pre-wrap;
       background-color: #FFFFFF !important;
       //border-left: 10px #fff solid;
-      border-right: 10px #fff solid;
+      //border-right: 10px #fff solid;
       color: #333333 !important;
-      padding-left: 33px!important;
+      padding-left: 53px!important;
 
       &.is-active {
         color: white !important;