边侧栏调整

src/components/Sidebar/index.vue

 <template lang='pug'>
   .sidebar-wrapper
     .control(':class'="{open:unfold,close:!unfold}")
-    .sidebar
+    .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
       .logo
         img(':src'="logo")
       .item('v-for'="(item,itemIndex) in menuList" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
@@ -16,7 +16,7 @@
           ':sort':'item.sort'
         })
       transition(name="fade",mode="out-in",appear)
-        .childrens-meuns('v-if'="unfold")
+        .childrens-meuns('v-show'="unfold",'v-if'="currentMenus")
           .children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
             el-menu&attributes({
               'default-active':"2",
@@ -33,7 +33,7 @@
                 template
                   el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",'@click'="choseSubChildren(i)")
                     span.menu-item-name {{i.name}}
-      .arrow-tip(':class'="{'left-l':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()")
+      .arrow-tip(':class'="{'left-l':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
         img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
 </template>
 <script>
@@ -47,6 +47,7 @@ export default {
       logo,
       unfold: false, // 水平展开
       menus: [],
+      unfoldBtn: false, // 展开按钮
       currentMenus: null,
       currentMenusIndex: -1,
       menuList: []
@@ -79,14 +80,24 @@ export default {
       this.currentMenus = item
       this.currentMenusIndex = itemIndex
       if (!this.unfold) {
-        this.unfold = true
+        this.toggleUnfold(true)
       }
     },
     selectItemMenu (...args) {
       console.log(args)
     },
-    toggleUnfold () {
-      this.unfold = !this.unfold
+    toggleUnfold (...args) {
+      if (!args.length) {
+        this.unfold = !this.unfold
+      } else {
+        this.unfold = args[0]
+      }
+    },
+    hiddenUnfoldBtn () {
+      this.unfoldBtn = false
+    },
+    showUnfoldBtn () {
+      this.unfoldBtn = true
     },
     choseSubChildren (...args) {
       console.log(args)

src/pages/home/index.vue

@@ -31,12 +31,9 @@ export default {
 .content-box
   position absolute
   display inline-block
-  /*left 260px*/
-  /*right 0*/
   top 70px
   bottom 0
   width 80%
-  /*overflow-y scroll*/
   -webkit-transition left 0.3s ease-in-out
   transition left 0.3s ease-in-out
   background #F3F2F8