调整侧边导航

src/components/Sidebar/index.vue

 <template lang='pug'>
   .sidebar-wrapper
+    .control(':class'="{open:unfold,close:!unfold}")
     .sidebar
       .logo
         img(':src'="logo")
-      .item('v-for'="item in menuList" ,':key'="item.id",'@click'='choseMenu(item)')
+      .item('v-for'="(item,itemIndex) in menuList" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
         sidebar-item&attributes({
           ':icon':'item.ico',
           ':link':'item.link',
@@ -14,6 +15,26 @@
           ':grade':'item.grade',
           ':sort':'item.sort'
         })
+      transition(name="fade",mode="out-in",appear)
+        .childrens-meuns('v-if'="unfold")
+          .children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
+            el-menu&attributes({
+              'default-active':"2",
+              'class':"el-menu-vertical",
+              'background-color':"#374A5E",
+              'text-color':"#fff",
+              'unique-opened':true,
+              'active-text-color':"#fff",
+              'mode':'vertical'
+            })
+              el-submenu(':index'="index | toString",'@select'="selectItemMenu")
+                template(slot="title")
+                  span {{it.name}}
+                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()")
+        img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
 </template>
 <script>
 import sidebarItem from '../sidebarItem'
@@ -24,45 +45,109 @@ export default {
       collapse: false,
       currentRouteIndex: 0,
       logo,
+      unfold: false, // 水平展开
       menus: [],
+      currentMenus: null,
+      currentMenusIndex: -1,
       menuList: []
     }
   },
+  filters: {
+    toString (value) {
+      return value + ''
+    },
+    pipeString (...args) {
+      return args.join('-')
+    }
+  },
   components: {
     sidebarItem
   },
   mounted () {
     this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMenus').then(res => {
       this.menuList = res.data.data
+      this.currentMenus = this.menuList[0]
     })
   },
-  computed: {},
+  computed: {
+
+  },
   created () {
   },
   methods: {
-    handleClick (index) {
-      this.currentRouteIndex = index
-      this.menus = this.sidebarList[this.currentRouteIndex].routes
-    },
-    choseMenu (item) {
-      console.log(item)
+    choseMenu (item, itemIndex) {
+      this.currentMenus = item
+      this.currentMenusIndex = itemIndex
+      if (!this.unfold) {
+        this.unfold = true
       }
+    },
+    selectItemMenu (...args) {
+      console.log(args)
+    },
+    toggleUnfold () {
+      this.unfold = !this.unfold
+    },
+    choseSubChildren (...args) {
+      console.log(args)
+    },
+    choseChildrenItem () {}
   }
 }
 </script>
 <style lang="stylus" scoped>
   .sidebar-wrapper
     position relative
-    width 70px
     height 100px
     display inline-block
+    z-index 5
   .sidebar
     position fixed
     left 0
     top 0
     bottom 0
     width 70px
-    background #374a5e
+    &::after
+      position absolute
+      top 0
+      left 0
+      bottom 0
+      right 0
+      content ''
+      background #2A3F54
+      z-index -1
+  .arrow-tip
+    position absolute
+    top 50%
+    width 48px
+    height 48px
+    line-height 48px
+    border-radius 50%
+    text-align center
+    background-color rgba(55, 74, 94, .5)
+    transform translateX(-50%)
+    transition all 0.2s
+    cursor pointer
+    z-index -2
+    &.left-l
+      left 70px
+    &.left-ll
+      left 240px
+  .icon-arrow
+    display inline-block
+    margin-left 15px
+    width 8px
+    &.right
+      transform rotateY(180deg)
+  .control
+    visibility hidden
+    height 100px
+    &.close
+      width 70px
+      transition width ease-in-out .2s
+    &.open
+      width 240px
+      transition width ease-in-out .2s
   .logo
     text-overflow ellipsis
     overflow hidden
@@ -82,6 +167,62 @@ export default {
     position relative
     display block
     cursor pointer
+    text-align center
     & + &
       margin-bottom 6px
+  .active::after
+    display block
+    content ''
+    background #1ABB9C
+    width 5px
+    position absolute
+    right 0
+    top 10px
+    height 47px
+  .childrens-meuns
+    position absolute
+    top 0
+    left 70px
+    bottom 0
+    width 170px
+    background #374A5E
+    z-index -1
+    zoom 1
+    .children-item
+      text-align left
+      margin-bottom 6px
+  .el-menu
+    border-right none
+    .el-submenu .el-menu-item
+      min-width auto
+  .el-menu-item
+    position relative
+    padding: 0 10px 0 36px
+    box-sizing border-box
+    &::before
+      box-sizing border-box
+      background #425668
+      bottom auto
+      content ""
+      height 9px
+      left 18px
+      margin-top 20px
+      position absolute
+      right auto
+      width 9px
+      z-index 1
+      border-radius 50%
+    &::after
+      box-sizing border-box
+      border-left 1px solid #425668
+      bottom 0
+      content ""
+      left 22px
+      position absolute
+      top 0
+  .menu-item-name
+    position relative
+    display block
+    font-weight 400
+    font-size 10px
 </style>

src/components/sidebarItem/index.vue

@@ -13,7 +13,7 @@ export default {
   props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
   methods: {
     clickItem () {
-      console.log('click item')
+      console.log(this)
     }
   }
 }
@@ -22,7 +22,7 @@ export default {
   .sidebar-item
     display block
     color: #fff
-    text-align center
+    /*text-align center*/
     font-weight 400
     font-size 10px
     padding 10px 5px