封装em-menu

先上效果图：

 

 

数据如下：提示 

default-active--要字符串

const menuObj = reactive({
  menuArray: [
    {
      name: "大哥",
      index: 1,//改成字符串哈
      path: "",
      children: [],
    },
    {
      name: "二哥",
      index: 2,
      path: "",
      children: [
        {
          name: "二哥01",
          index: 2-1,
          path: "",
          children: [
            {
              name: "二哥001",
              index: 2-1-1,
              path: "",
              children: [],
            },
          ],
        },
        {
          name: "二哥02",
          index: 2-2,
          path: "",
          children: [],
        },
      ],
    },
    {
      name: "三弟",
      index: 3,
      path: "",
      children: [],
    },
  ],
});

<style scoped lang="less">
.my_menus {
  height: 100%;

  .el-menu-item:hover {
    outline: 0;
    color: #343645;
    background-color: #ecf5ff !important;
  }
  .el-menu--popup-container .el-menu-item:hover {
    outline: 0;
    color: #343645;
    background-color: #ecf5ff !important;
  }
  .el-sub-menu:hover {
    outline: 0;
    color: #343645;
    background-color: #ecf5ff !important;
  }
  // 取消右侧 底部的 1px线条
  .el-menu--horizontal {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: none;
    border-right: none;
  }
  // 设置有二级 三级的菜单的字体
  :deep(.el-sub-menu__title) {
    font-size: 16px;
  }

  // 点击后的颜色 字体(有二级 三级的菜单 字体大小没生效)
  .el-menu-item.is-active {
    color: #9066eb;
    font-size: 14px;
    font-weight: bolder;
    background-color: #fff !important;
  }
  // 默认没选中的菜单的字体样式
  .el-menu-item {
    color: #343645;
    font-size: 14px;
    font-weight: 400;
  }
}
// hover的样式设置
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: var(--el-menu-hover-text-color);
  background-color: #ecf5ff !important;
}
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
  border-bottom: 2px solid var(--el-menu-active-color);
  color: var(--el-menu-active-color);
  font-weight: bolder !important;
}
</style>
<template>
  <div class="my_menus">
    <el-menu
      :mode="props.mode"
      background-color="#fff"
      text-color="#343645"
      active-text-color="#9066EB"
      
    >
      <template v-for="item in props.menusData" :key="item.index">
        <!-- 一级菜单 -->
        <el-menu-item v-if="item.children.length === 0" :index="item.index">
          {{ item.name }}
        </el-menu-item>
        <!-- 二级菜单 -->
        <el-sub-menu v-else :index="item.index">
          <template #title>{{ item.name }}</template>
          <template v-for="subItem in item.children" :key="subItem.name">
            <el-menu-item
              v-if="subItem.children.length == 0"
              :index="subItem.index"
            >
              {{ subItem.name }}
            </el-menu-item>
            <!-- 三级菜单 -->
            <el-sub-menu v-else :index="subItem.index">
              <template #title>{{ subItem.name }}</template>
              <template v-if="subItem.children.length !== 0">
                <el-menu-item
                  v-for="subItemSon in subItem.children"
                  :key="subItemSon.name"
                  :index="subItemSon.name"
                >
                  {{ subItemSon.name }}
                </el-menu-item>
              </template>
            </el-sub-menu>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, defineProps } from "vue";

import { useRouter } from "vue-router";
import store from "@/store";
const router = useRouter();
const defaultActive = ref(router.currentRoute.value.meta.index) as any;
const props = defineProps({
  menusData: {
    type: Array,
    default: () => {
      return [];
    },
    required: true, //默认是false   是否必传
  },
  mode: {
    type: String,
    default: "horizontal", //默认水平方向
  },
});

watch(
  // 监听路由选中
  () => router.currentRoute.value.meta.index,
  (newRoute) => {
    defaultActive.value = newRoute;
  }
);
</script>

　　上面是myMenus>index.vue的代码

在header里面引入 

import myMenus from "@/components/myMenus/index.vue";

 使用

<my-menus :menusData="menuObj.menuArray" mode='horizontal'></my-menus>