vue左侧菜单栏折叠后文字不隐藏

package.json

@@ -35,6 +35,7 @@
     "v-viewer": "^1.5.1",
     "vue": "2.6.10",
     "vue-cropper": "^0.5.4",
+    "vue-fragment": "^1.6.0",
     "vue-pdf": "^4.1.0",
     "vue-router": "3.0.6",
     "vuedraggable": "^2.23.2",

src/layout/components/Sidebar/SidebarItem.vue

@@ -4,12 +4,12 @@
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <div class="menuTitle">
           <el-menu-item style="" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-            <div :class="{'childMenu':onlyOneChild.meta.title !== '平台首页;Home Page'}" style="display: flex;">
+            <!--            <div :class="{'childMenu':onlyOneChild.meta.title !== '平台首页;Home Page'}" style="display: flex;">-->
             <item
               :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
               :title="onlyOneChild.meta.title"
             />
-            </div>
+            <!--            </div>-->
           </el-menu-item>
         </div>
       </app-link>
@@ -17,7 +17,7 @@
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <div class="metaTitle">
+        <div :class="{'metaTitle':!collapse}">
           <item
             v-if="item.meta"
             :icon="item.meta && item.meta.icon"
@@ -61,6 +61,10 @@ export default {
     basePath: {
       type: String,
       default: ''
+    },
+    collapse: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="(route, index) in permission_routes" :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" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -47,6 +47,7 @@ export default {
       return variables
     },
     isCollapse() {
+      console.log('asdfasdfasdf', !this.sidebar.opened)
       return !this.sidebar.opened
     }
   }

src/main.js

@@ -17,6 +17,9 @@ import '@/icons' // icon
 import '@/assets/icons' // icon
 import '@/permission' // permission control
 
+import Fragment from 'vue-fragment'
+Vue.use(Fragment.Plugin)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/styles/sidebar.scss

@@ -229,6 +229,7 @@
 }
 
 .router-link-active .el-menu-item.is-active {
+  display: flex!important;
   background-color: #D20A10  !important;
   color: white!important;
 }
@@ -275,6 +276,7 @@
       //white-space: pre-wrap;
       background-color: #FFFFFF !important;
       color: #333333 !important;
+      padding-left: 53px!important;
 
       &.is-active {
         color: white !important;