From 5476dd0fa131b86625125a978e48d6f1d70b25ad Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 12 Jun 2025 11:13:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=AF=BC=E8=88=AA=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SliderMenu.vue | 239 +++++++++++++++++++++++++++++++++---------
 1 file changed, 192 insertions(+), 47 deletions(-)

diff --git a/src/components/SliderMenu.vue b/src/components/SliderMenu.vue
index 2e7b954..8e6e316 100644
--- a/src/components/SliderMenu.vue
+++ b/src/components/SliderMenu.vue
@@ -1,61 +1,103 @@
 <template>
-  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse"
+      <transition name="menu-collapse">
+  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu"  @open="handleOpen"
+   @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
     :default-openeds="['1', '2']">
-    <div class="menu-top">
-      <span v-show="!isCollapse">
-        导航
-      </span>
-      <img v-if="!isCollapse" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
-      <img v-else src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
-    </div>
-    <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
-      <template slot="title">
-        <i :class="item.icon"></i>
-        <span>{{ item.title }}</span>
-      </template>
-      <el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index"
-        :index="subItem.index" @click="handleMenuItemClick(subItem)">
-        {{ subItem.title }}
-      </el-menu-item>
-    </el-submenu>
+      <div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;" >
+        <div class="menu-top">
+          <span v-show="!isCollapse">
+            导航
+          </span>
+          <GuipToolTip :content="isCollapse ? '展开' : '收起'">
+            <img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="" >
+            <img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
+          </GuipToolTip>
+        </div>
+        <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
+          <template slot="title">
+            <SvgIcon1
+              :iconPath="require(`@/assets/menu/${item.icon}.svg`)"
+              defaultColor="#8A9099"
+              activeColor="#006AFF"
+              :isActive="item.index == activeMenu.substr(0,1) && isCollapse"
+              />
+            <span class="title_text" :index="item.index">{{ item.title }}</span>
+          </template>
+            <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
+              :index="subItem.index">
+              {{ subItem.title }}
+            </el-menu-item>
+        </el-submenu>
+      </div>
   </el-menu>
+</transition>
+
 </template>
 <script>
+import SvgIcon1 from '@/components/SvgIcon1.vue';
+import GuipToolTip from '@/components/GuipToolTip.vue';
 export default {
   name: 'SliderMenu',
+  components:{
+    SvgIcon1,
+    GuipToolTip
+  },
+  props: {
+    menuData: {
+      type: Array,
+      default: () => []
+    },
+  },
   data() {
     return {
       isCollapse: false,
       activeMenu: '',
       routerList: [],
-      menuData: [
-        {
-          index: '1',
-          title: '父级菜单1',
-          icon: 'el-icon-location',
-          children: [
-            { index: '1-1', title: '子级菜单1-1', path: '/' },
-            { index: '1-2', title: 'ui页面', path: '/ui' }
-          ]
-        },
-        {
-          index: '2',
-          title: '父级菜单2',
-          icon: 'el-icon-menu',
-          children: [
-            { index: '2-1', title: '子级菜单2-1', path: '/about' },
-            { index: '2-2', title: '加盟耶main', path: '/franchise' }
-          ]
-        }
-      ]
+      // menuData: [
+      //   {
+      //     index: '1',
+      //     title: '父级菜单1',
+      //     icon: 'el-icon-location',
+      //     children: [
+      //       { index: '1-1', title: '子级菜单1-1', path: '/' },
+      //       { index: '1-2', title: 'ui页面', path: '/ui' }
+      //     ]
+      //   },
+      //   {
+      //     index: '2',
+      //     title: '父级菜单2',
+      //     icon: 'el-icon-menu',
+      //     children: [
+      //       { index: '2-1', title: '子级菜单2-1', path: '/about' },
+      //       { index: '2-2', title: '加盟耶main', path: '/franchise' }
+      //     ]
+      //   }
+      // ]
     };
   },
   methods: {
     changeMenuStatus(flag) {
       this.isCollapse = flag;
     },
+    // handleSelect(index) {
+    //   this.activeMenu = index;
+    // },
+    handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      },
     handleSelect(index) {
       this.activeMenu = index;
+      console.log(index,'---index');
+      // 找到被点击的 menu 项对应的 path
+      const allItems = this.menuData.flatMap(menu => menu.children);
+      const targetItem = allItems.find(item => item.index === index);
+
+      if (targetItem && this.$route.path !== targetItem.path) {
+        this.$router.push(targetItem.path);
+      }
     },
     handleMenuItemClick(item) {
       this.$router.push(item.path);
@@ -63,22 +105,103 @@ export default {
     }
   },
   mounted() {
-    this.routerList = this.$router.options.router;//配置路由
-    console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
-    // 初始化时设置默认激活的菜单项
-    this.activeMenu = this.$route.path;
+    const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index })));
+    const current = allItems.find(item => item.path === this.$route.path);
+    this.activeMenu = current ? current.index : '';
+    this.defaultOpeneds = current ? [current.parentIndex] : [];
+    // this.routerList = this.$router.options.router;//配置路由
+    // console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
+    // // 初始化时设置默认激活的菜单项
+    // this.activeMenu = this.$route.path;
   }
 }
 </script>
 <style lang="scss" scoped>
+.menu-collapse-leave-active,
+.menu-collapse-enter-active {
+  transition: all 0.7s;
+}
+
+.menu-collapse-enter,
+.menu-collapse-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.el-menu--vertical{
+  .el-menu-item{
+    height: 40px;
+    line-height: 40px;
+  }
+  .el-menu-item.is-active{
+    font-weight: bold;
+  }
+}
+// .slide-fade-enter-active, .slide-fade-leave-active {
+//   transition: all 1.5s ease;
+// }
+// .slide-fade-enter, .slide-fade-leave-to {
+//   opacity: 0;
+//   transition: all 1.5s ease;
+//   transform: translateX(-10px);
+// }
+
+// .slide-enter-active, .slide-leave-active {
+//   transition: all 1.5s ease;
+//   max-height: 200px;
+// }
+
+/* 添加收起时的过渡效果 */
+// .el-menu--collapse .el-submenu .el-menu {
+//   transition: all 0.3s ease-in-out;
+//   overflow: hidden;
+// }
+
+// .el-menu--collapse .el-submenu > .el-menu {
+//   display: none;
+//   opacity: 0;
+//   transform: translateY(-10px);
+// }
+
+// .el-menu:not(.el-menu--collapse) .el-submenu > .el-menu {
+//   transition: all 0.3s ease-in-out;
+//   opacity: 1;
+//   transform: translateY(0);
+// }
+
+// .slide-enter, .slide-leave-to {
+//   opacity: 0;
+//   max-height: 0;
+// }
+.title_img {
+  width: 16px;
+  margin-right: 4px;
+}
+
+.title_text {
+  margin-left: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  display: block;
+
+}
+.el-menu--collapse .title_text{
+  display: none;
+}
+.el-menu--collapse ::v-deep .el-submenu__icon-arrow{
+  display: none;
+}
+
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 158px;
   min-width: 158px;
   min-height: calc(100vh - 62px);
+  overflow-y: auto;
 }
 
 .el-menu-item {
   padding: 0 22px;
+  font-size: 12px;
 }
 
 .menu-top {
@@ -91,18 +214,23 @@ export default {
   padding: 15px 0px;
   margin: 0 22px;
   display: flex;
-  font-size: 16px;
+  font-size: 14px;
   color: #1E2226;
   font-weight: bold;
   line-height: normal;
   letter-spacing: 0.08em;
   justify-content: space-between;
   align-items: center;
+  img{
+    width: 14px;
+    height: 14px;
+
+  }
 }
 
 ::v-deep .el-submenu {
-  width: 16px;
-  font-size: 16px;
+  // width: 16px;
+  font-size: 12px;
 }
 
 ::v-deep .el-submenu .el-menu-item {
@@ -118,11 +246,11 @@ export default {
 
 ::v-deep .el-submenu__title:hover {
   background-color: transparent;
-  cursor: not-allowed;
+  // cursor: not-allowed;
 }
 
 ::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
-  display: none;
+  // display: none;
 }
 
 ::v-deep .el-submenu .el-menu-item {
@@ -150,4 +278,21 @@ export default {
   color: #006AFF;
   font-weight: bold;
 }
+// .el-submenu .el-menu {
+//   transition: all 0.3s ease;
+// }
+
+// .el-menu--collapse .el-submenu > .el-menu {
+//   display: block !important;
+//   overflow: hidden;
+//   transition: all 0.3s ease;
+//   opacity: 0;
+//   height: 0;
+//   transform: translateY(-10px);
+// }
+
+// .el-menu--collapse .el-submenu.is-opened > .el-menu {
+//   opacity: 0;
+//   height: 0;
+// }
 </style>
\ No newline at end of file