页面修改

src/components/mall.vue

@@ -125,7 +125,7 @@
     border-bottom: 1px solid #E6E6E6;
     height: 59px;
     line-height: 59px;
-    padding-left:28px;
+    padding-left: 28px;
   }
 
   .leftMenu2 .el-submenu__title span {
@@ -201,6 +201,7 @@
     padding: 0 !important;
     text-align: center;
   }
+
   .mainContainer .mainRightContent {
     width: 100%;
     height: 100%;
@@ -270,10 +271,12 @@
     padding: 20px;
     overflow-y: scroll;
   }
-  .mainContainer .firstActive{
-    background-color: #fff!important;
-    color:#000000!important;
+
+  .mainContainer .firstActive {
+    background-color: #fff !important;
+    color: #000000 !important;
   }
+
 </style>
 <template>
   <div class="mainContainer">
@@ -284,7 +287,8 @@
           <div class="asideInner">{{currentUser.MallName}}</div>
         </div>
         <ul>
-          <li class="menu-item" @mouseover="mouseOver(item)" v-for="(item,index) in MenuList" :class="{'firstActive':firstCked==item.MenuId}" @click="firstCked=item.MenuId" :key="index">
+          <li class="menu-item" @mouseover="mouseOver(item)" @mouseout="mouseOutMenu()" v-for="(item,index) in MenuList"
+            :class="{'firstActive':firstCked==item.MenuId}" @click="firstCked=item.MenuId" :key="index">
             <i class="iconfont" :class="item.IconClass"></i>
             <div class="vue-line-clamp">{{item.MenuName}}</div>
           </li>
@@ -293,24 +297,28 @@
       <div class="leftMenu2" v-if="showTwo">
         <div class="is-show-menu-1" @click="hideTwo()">
           <<</div> <div class="menu-item-2-title">
-            {{secondList.MenuName}}
+            {{secondItem.MenuName}}
         </div>
         <div>
           <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
-            <template v-for="(childItem,childIndex) in secondList.SubList">
-                <el-submenu v-if="childItem.ThirdList.length>0" :index="childItem.MenuId+''"  :key="childIndex">
+            <template v-for="(childItem,childIndex) in secondItem.SubList">
+              <el-submenu v-if="childItem.ThirdList.length>0" :index="childItem.MenuId+''" :key="childIndex">
                 <template slot="title">
                   <span>{{childItem.MenuName}}</span>
                 </template>
                 <el-menu-item-group>
-                  <el-menu-item :index="thirdChild.MenuId+''" @click.native="clickMenu(thirdChild)" v-for="(thirdChild,thirdIndex) in childItem.ThirdList" :key="thirdIndex">
-                    <div class="checkBlock" :class="defaultActive==thirdChild.MenuId?'isActive':''">{{thirdChild.MenuName}}</div>
+                  <el-menu-item :index="thirdChild.MenuId+''" @click.native="clickMenu(thirdChild,secondItem)"
+                    v-for="(thirdChild,thirdIndex) in childItem.ThirdList" :key="thirdIndex">
+                    <div class="checkBlock" :class="defaultActive==thirdChild.MenuId?'isActive':''">
+                      {{thirdChild.MenuName}}</div>
                   </el-menu-item>
                 </el-menu-item-group>
-                </el-submenu>
-               <template v-else>
-                <el-menu-item :index="childItem.MenuId+''" @click.native="clickMenu(childItem)" :key="childItem.MenuId">
-                    <div class="checkBlock" style="margin-left:-7px;" :class="defaultActive==childItem.MenuId?'isActive':''">{{childItem.MenuName}}</div>
+              </el-submenu>
+              <template v-else>
+                <el-menu-item :index="childItem.MenuId+''" @click.native="clickMenu(childItem,secondItem)"
+                  :key="childItem.MenuId">
+                  <div class="checkBlock" style="margin-left:-7px;"
+                    :class="defaultActive==childItem.MenuId?'isActive':''">{{childItem.MenuName}}</div>
                 </el-menu-item>
               </template>
             </template>
@@ -364,10 +372,10 @@
         showTwo: false,
         defaultActive: '9',
         currentUser: {},
-        Height:0,
+        Height: 0,
         MenuList: [], //菜单列表
-        secondList:{},
-        firstCked:0
+        secondItem: {},
+        firstCked: 0
       };
     },
     created() {
@@ -383,7 +391,6 @@
         this.apipost("/api/Tenant/GetMenuList", {}, res => {
           if (res.data.resultCode == 1) {
             this.MenuList = res.data.data;
-            console.log("this.MenuList",this.MenuList);
           } else {
             this.Info(res.data.message);
           }
@@ -398,12 +405,22 @@
       mouseOver(item) {
         this.showTwo = true;
         this.isShowOne = false;
-        this.secondList=item;
+        this.secondItem = item;
+      },
+      //鼠标移除
+      mouseOutMenu() {
+        this.MenuList.forEach(item => {
+          if (item.MenuId == firstCked) {
+            this.secondItem = item;
+          }
+        })
       },
       //菜单点击
-      clickMenu(item){
-        this.defaultActive=item.MenuId+'';
-        if(item.MenuUrl&&item.MenuUrl!=''){
+      clickMenu(item, secondItem) {
+        //选中当前大类
+        this.firstCked = secondItem.MenuId;
+        this.defaultActive = item.MenuId + '';
+        if (item.MenuUrl && item.MenuUrl != '') {
           this.$router.push({
             path: item.MenuUrl
           });
@@ -411,12 +428,12 @@
       }
     },
     mounted() {
-        this.getMenuList();
-        this.Height = document.documentElement.clientHeight - 60;
-        //监听浏览器窗口变化　
-        window.onresize = () => {
-          this.Height = document.documentElement.clientHeight - 60
-        }
+      this.getMenuList();
+      this.Height = document.documentElement.clientHeight - 60;
+      //监听浏览器窗口变化　
+      window.onresize = () => {
+        this.Height = document.documentElement.clientHeight - 60
+      }
     }
   };