first commit

pgweb/src/components/menu/nxMenu.vue

@@ -0,0 +1,40 @@
+<!-- 可递归菜单 -->
+<template>
+    <div style="height: 100%;">
+      <!-- 如果有子菜单，则渲染子菜单 -->
+      <el-submenu style="height: 100%;" v-if="item.children && item.children.length > 0" :index="item.routerName" >
+        <template slot="title">          
+          {{ item.title  }}
+        </template>
+        <!-- 递归调用MenuItem组件 -->
+        <menu-item v-for="(child, index) in item.children" :key="index" :item="child" class="menu-custom"></menu-item>
+      </el-submenu>
+      
+      <!-- 如果没有子菜单，则渲染菜单项 -->
+      <el-menu-item v-else :index="item.routerName" class="menu-custom">
+        <!-- <i class="el-icon-document"></i> -->
+        {{ item.title }}
+      </el-menu-item>
+    </div>
+  </template>
+  
+  <script>
+  import "@/styles/globalSetting.less";
+  export default {
+    name: 'MenuItem',
+    props: {
+      item: Object
+    }
+  }
+  </script>
+<style lang="less" scoped>
+  .menu-custom  {
+    color: var(--menu-font-color);
+  }
+  :deep .el-menu-item.is-active {
+    background-color: var(--bg-color);
+  }
+  :deep .el-menu-item.is-active.menu-custom {
+    color: var(--main-color);
+  }
+</style>