t

src/components/Slider/Menu.vue

@@ -1,13 +1,17 @@
 <template>
-  <li>
-    <span @click="toggle(model.menuName,model.menuUrl,model.menuPath)">
-      <i v-if="!isFolder" class="icon file-text">●</i>
+  <li class="menu">
+    <div 
+      @click="toggle(model.menuName)" 
+      :class="{'menu-son': model.parent === 1}"
+    > 
+      <img class="menu-icon" :src="model.icon" alt="">
       {{ model.menuName }}
-      <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
-    </span>
-    <ul v-show="open" v-if="isFolder">
-      <Menu v-for="item in model.childMenus" :model="item" :key="item.menuId"></Menu>
-    </ul>
+    </div>
+    <!-- <transition name="slide-fade" mode="out-in"> -->
+      <ul v-show="open" v-if="isFolder">
+        <Menu v-for="item in model.childMenus" :model="item" :key="item.menuId" :icon="item.icon"></Menu>
+      </ul>
+    <!-- </transition> -->
   </li>
 </template>
 
@@ -16,23 +20,25 @@ export default {
   name: "Menu",
   data() {
     return {
-      open: false,
-    }
+      open: false
+    };
   },
-  props: ['model'],
+  props: ["model", "icon"],
   computed: {
     isFolder() {
-      return this.model.childMenus && this.model.childMenus.length
+      return this.model.childMenus && this.model.childMenus.length;
     }
   },
   methods: {
-    toggle(msg,menuUrl,menuPath) {
-      if(this.isFolder) {
-        this.open = !this.open
+    toggle(msg) {
+      console.log(this.icon, "cio");
+      if (this.isFolder) {
+        console.log(111);
+        this.open = !this.open;
       }
     }
   }
-}
+};
 </script>
 
 <style lang='scss' scoped>
@@ -41,7 +47,29 @@ export default {
   height: 46px;
   line-height: 46px;
   background-color: rgb(67, 74, 80);
-  padding-left: 20px;
+  // padding-left: 10px;
   color: #fff;
+  list-style: none;
+  cursor: pointer;
+  .menu-son {
+    margin-left: 20px;
+  }
+  .menu-icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+  }
+}
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+.slide-fade-leave-active {
+  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active for below version 2.1.8 */ {
+  // transform: translateX(10px);
+  opacity: 0;
+  height: auto;
 }
 </style>

src/components/Slider/Slider.vue

@@ -2,8 +2,8 @@
   <div class="slider">
     <div class="silder-header"></div>
     <div class="slider-list">
-      <ul v-for="menuItem in theModel">
-        <Menu :model="menuItem"></Menu>
+      <ul class="slider-item" v-for="(menuItem, index) in theModel" :key="index">
+        <Menu :model="menuItem" :icon="menuItem.icon"></Menu>
       </ul>
     </div>
   </div>
@@ -16,40 +16,28 @@ export default {
   data() {
     return {
       theModel: [
+        
         {
-          id: "1",
-          menuName: "导航1",
-          menuCode: "10",
-          childMenus: [
-            {
-              menuName: "用户管理",
-              menuCode: "11",
-              childMenus: [
-                {
-                  menuName: "11111",
-                  menuCode: "12",
-                  childMenus: []
-                }
-              ]
-            },
-            {
-              menuName: "角色管理",
-              menuCode: "12",
-              childMenus: []
-            },
-            {
-              menuName: "菜单管理",
-              menuCode: "13",
-              childMenus: []
-            }
-          ]
+          id: "2",
+          menuName: "这是我的文章",
+          icon: require('./../../assets/icon2.png'),
+          childMenus: [{
+            id: '2-1',
+            menuName: '前端小栈',
+            icon: require('./../../assets/icon2-1.png'),
+            parent: 1
+          }, {
+            id: '2-2',
+            menuName: '其他东东',
+            icon: require('./../../assets/icon2-2.png'),
+            parent: 1
+          }]
         },
         {
           id: "1",
-          menuName: "导航2",
-          menuCode: "10",
-          childMenus: []
-        }
+          menuName: "写一篇文章",
+          icon: require('./../../assets/icon1.png')
+        },
       ]
     };
   },
@@ -75,6 +63,10 @@ export default {
   }
   .slider-list {
     padding: 10px 0;
+    height: 100%;
+    .slider-item {
+      display: block;
+    }
   }
 }
 </style>