拆分 menu-item 组件, 为 sub-menu 与 menu-item

src/css/layui.css

@@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
   line-height: 60px;
 }
 
-.layui-nav .layui-nav-item a {
+.layui-nav .layui-nav-item >  a {
   display: block;
   padding: 0 30px;
-  color: #fff;
   color: rgba(255, 255, 255, 0.7);
-  -webkit-transition: all 0.3s;
 }
 
 .layui-nav .layui-this:after,
@@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
   line-height: 42px;
 }
 
-.layui-nav-tree .layui-nav-item a {
+.layui-nav-tree .layui-nav-item > a {
   position: relative;
   height: 42px;
   line-height: 42px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  padding: 5px 30px 5px 30px;
 }
 
-.layui-nav-tree .layui-nav-item > a {
-  padding-top: 5px;
-  padding-bottom: 5px;
+.layui-nav-tree .layui-nav-item * {
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .layui-nav-tree .layui-nav-more {

src/index.ts

@@ -70,6 +70,7 @@ import LaySkeleton from "./module/skeleton/index";
 import LaySkeletonItem from "./module/skeletonItem/index";
 import LayStep from "./module/step/index";
 import LayStepItem from "./module/stepItem/index";
+import LaySubMenu from "./module/subMenu/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -136,6 +137,7 @@ const components: Record<string, IDefineComponent> = {
   LayCountUp,
   LayStep,
   LayStepItem,
+  LaySubMenu
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -148,13 +150,9 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
-  LayStep,
-  LayStepItem,
-  LaySkeleton,
-  LaySkeletonItem,
   LayRadio,
-  LayIcon,
   LayButton,
+  LayIcon,
   LayBacktop,
   LayLayout,
   LaySide,
@@ -208,7 +206,15 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer
+  LayLayer,
+  LayTooltip,
+  LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
+  LayCountUp,
+  LayStep,
+  LayStepItem,
+  LaySubMenu
 };
 
 export { layer };

src/module/menuItem/index.vue

@@ -1,39 +1,12 @@
-<template>
-  <li
-    v-if="slots.default"
-    class="layui-nav-item"
-    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
-  >
-    <a href="javascript:void(0)" @click="openHandle">
-      {{ title }}
-      <i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
-    </a>
-    <dl
-      class="layui-nav-child"
-      :class="[
-        openKeys.includes(id) && !isTree ? 'layui-show' : '',
-        !isTree ? 'layui-anim layui-anim-upbit' : '',
-      ]"
-    >
-      <slot></slot>
-    </dl>
-  </li>
+<script lang="ts">
+export default {
+  name: "LayMenuItem"
+}
+</script>
 
-  <li
-    v-else
-    class="layui-nav-item"
-    :class="[selectedKey === id ? 'layui-this' : '']"
-    @click="selectHandle()"
-  >
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </li>
-</template>
+<script setup lang="ts">
+import { defineProps, inject, Ref, useSlots } from "vue";
 
-<script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, Ref, ref, useSlots } from "vue";
 const slots = useSlots();
 
 const props = defineProps<{
@@ -41,19 +14,22 @@ const props = defineProps<{
   title: string;
 }>();
 
-const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
-
-const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
-  }
-};
 
 const selectHandle = function () {
   selectedKey.value = props.id;
 };
 </script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[selectedKey === id ? 'layui-this' : '']"
+    @click="selectHandle()"
+  >
+    <a href="javascript:void(0)">
+      <slot v-if="slots.default"></slot>
+      <span v-else>{{ title }}</span>
+    </a>
+  </li>
+</template>

src/module/subMenu/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySubMenu", Component);
+};
+
+export default Component as IDefineComponent;

src/module/subMenu/index.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+export default {
+  name: "LaySubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, inject, Ref, useSlots } from "vue";
+
+const slots = useSlots();
+
+const props = defineProps<{
+  id: string;
+  title: string;
+}>();
+
+const isTree = inject("isTree");
+const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
+const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+
+const openHandle = function () {
+  if (openKeys.value.includes(props.id)) {
+    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+  } else {
+    openKeys.value.push(props.id);
+  }
+};
+
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+</script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+  >
+    <a href="javascript:void(0)" @click="openHandle()">
+      <slot v-if="slots.title" name="title"></slot>
+      <span v-else>{{ title }}</span>
+      <i
+        :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
+        class="layui-icon layui-icon-down layui-nav-more"
+      ></i>
+    </a>
+    <dl
+      class="layui-nav-child"
+      :class="[
+        isOpen && !isTree ? 'layui-show' : '',
+        !isTree ? 'layui-anim layui-anim-upbit' : '',
+      ]"
+    >
+      <slot></slot>
+    </dl>
+  </li>
+</template>