提交

src/components/menu.vue

@@ -2,28 +2,27 @@
   <div class="menuDiv">
     <ul class="menuUl">
       <li
-        v-for="(item, index) in 8"
-        :key="index"
-        :class="{ active: activeIndex === index }"
+        v-for="(item, index) in menuData"
+        :key="item.value"
+        :class="{ menuli: true, active: activeIndex === index }"
         @mouseover="menuMouseOver(index)"
         @mouseleave="menuMouseLeave(index)"
       >
         <router-link to="home">
-          <span class="menuLine"></span>文件柜
+          <span class="menuLine"></span>{{ item.title }}
           <i class="el-icon-arrow-right"></i>
         </router-link>
+        <div v-if="activeIndex === index">
+          <div class="menuCon" v-if="item.subList">
+            <ul class="menuConUl">
+              <li v-for="subitem in item.subList" :key="subitem.subValue">
+                {{ subitem.subTitle }}123
+              </li>
+            </ul>
+          </div>
+        </div>
       </li>
     </ul>
-    <div
-      class="menuCon"
-      v-if="menuCon"
-      @mouseover="menuConMouseOver"
-      @mouseleave="menuConMouseLeave"
-    >
-      <ul class="menuConUl">
-        <li v-for="(item, index) in 10" :key="index">选项</li>
-      </ul>
-    </div>
   </div>
 </template>
 <script>
@@ -34,27 +33,73 @@ export default {
   data() {
     return {
       activeIndex: "a",
-      menuCon: false
+      menuConShow: false,
+      menuData: [
+        {
+          title: "文件柜",
+          value: 1,
+          subList: [
+            {
+              subTitle: "选项",
+              subValue: 12
+            },
+            {
+              subTitle: "选项",
+              subValue: 12
+            },
+            {
+              subTitle: "选项",
+              subValue: 12
+            }
+          ]
+        },
+        {
+          title: "文件柜2",
+          value: 2,
+          subList: [
+            {
+              subTitle: "选项",
+              subValue: 21
+            },
+            {
+              subTitle: "选项",
+              subValue: 22
+            },
+            {
+              subTitle: "选项",
+              subValue: 23
+            }
+          ]
+        },
+        {
+          title: "文件柜3",
+          value: 3,
+          subList: [
+            {
+              subTitle: "选项",
+              subValue: 31
+            },
+            {
+              subTitle: "xx",
+              subValue: 32
+            },
+            {
+              subTitle: "选项",
+              subValue: 33
+            }
+          ]
+        }
+      ]
     };
   },
   methods: {
     menuMouseOver(index) {
-      console.log(index);
       this.activeIndex = index;
       this.menuCon = true;
     },
     menuMouseLeave(index) {
-      console.log(index);
       this.activeIndex = "a";
       this.menuCon = false;
-    },
-    menuConMouseOver() {
-      console.log(index);
-      this.menuCon = true;
-    },
-    menuConMouseLeave() {
-      console.log(index);
-      this.menuCon = false;
     }
   }
 };
@@ -62,12 +107,12 @@ export default {
 <style lang="scss" scoped>
 .menuDiv {
   width: 100%;
-  position: relative;
   .menuUl {
     list-style: none;
     width: 100%;
     background: #fff;
-    li {
+    position: relative;
+    li.menuli {
       height: 4.8rem;
       line-height: 4.8rem;
       font-size: 1.4rem;
@@ -105,7 +150,7 @@ export default {
   }
   .menuCon {
     width: 60rem;
-    height: 100%;
+    min-height: 38rem;
     background: #fff;
     padding: 1.6rem;
     box-sizing: border-box;