kuailelunwen_new_houtai/src/components/SliderMenu.vue

<template>
  <transition name="menu-collapse">
    <!-- :default-active="activeMenu" -->
    <el-menu class="el-menu-vertical-demo custom-menu" @open="handleOpen"
    :default-active="currentMenuItem?.index"
      @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
      >
      <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>
        <template v-for="item in menuData" >
          <el-submenu v-if="item.children"  :key="item.index" :index="item.index">
            <template slot="title">
              <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
                activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index.substr(0,1) && isCollapse" />
              <span class="title_text" >{{ 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" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)">
              {{ subItem.title }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item.index"  :key="item.index" @click="handleSelect(item.index, [item.index], item)">
              <div class="flex">
                <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
                  activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index" />
                <span class="title_text" slot="title">{{ item.title }}</span>
              </div>
          </el-menu-item>
        </template>
      </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: [],
      currentMenuItem:'',
      currentMenuParent:''
    };
  },
  watch: {
    "$route.path"() {
      this.updateCurrentMenu();
    },
  },
  methods: {
    changeMenuStatus(flag) {
      this.isCollapse = flag;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // handleSelect(index,indexPath) {
    //   this.activeMenu = index;
    //   console.log(index,indexPath, '---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);
    //   }
    // },
    handleSelect(index, indexPath, menuItem) {
      if (menuItem.path && this.$route.path !== menuItem.path) {
        this.$router.push(menuItem.path);
      }
    },
    updateCurrentMenu() {
      const result = this.findMenuItemByPath(this.menuData, this.$route.path);
      this.currentMenuItem = result?.item;
      console.log(this.currentMenuItem,'currentMenuItem==');
    },
    findMenuItemByPath(menuItems, targetPath, parent = null) {
      for (const item of menuItems) {
        if (item.path === targetPath) return { item, parent };
        if (item.children?.length) {
          const found = this.findMenuItemByPath(item.children, targetPath, item);
          if (found) return found;
        }
      }
      return null;
    },
    handleMenuItemClick(item) {
      this.$router.push(item.path);
      this.activeMenu = item.index;
    },
  },
  mounted() {
    // console.log(this.$route.path,'this.$route.path----');
    // const allItems = this.menuData.flatMap(menu =>menu.children ? menu.children?.map(child => ({ ...child, parentIndex: menu.index })) : menu.children);
    // console.log(allItems,'=====');
    // 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;
    this.updateCurrentMenu();
  }
}
</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;
  }
}

.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 {
  background: #FFFFFF;
  box-sizing: border-box;
  /* middle/middle_line_1 */
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #DFE2E6;
  padding: 15px 0px;
  margin: 0 22px;
  display: flex;
  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: 12px;
}

::v-deep .el-submenu .el-menu-item {
  min-width: 138px;
  width: 100%;
}

::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

::v-deep .el-submenu__title:hover {
  background-color: transparent;
  // cursor: not-allowed;
}

::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
  // display: none;
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 22px;
  display: flex;
  justify-content: flex-start;
}

::v-deep .el-submenu .el-menu-item {
  height: 36px;
}

::v-deep.el-submenu .el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #8A9099;
  letter-spacing: 0.08em;
}

::v-deep .el-menu-item:hover {
  background: #F6F7FA;
}

::v-deep .el-menu-item.is-active {
  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>