init

src/component/subMenu/SubMenuPopup.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+export default {
+  name: "SubMenuPopup",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, inject, Ref } from "vue";
+import LayDropdown from "../dropdown/index.vue";
+import { LayIcon } from "@layui/icons-vue";
+import useLevel from "../menu/useLevel";
+
+export interface SubMenuPopupProps {
+  id: string;
+  title?: string;
+}
+
+const props = defineProps<SubMenuPopupProps>();
+
+const { level } = useLevel();
+const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
+const theme = inject("menuTheme") as Ref<string>;
+
+const computedTheme = computed(() => {
+  return theme.value === "light" ? "-light" : "";
+});
+
+const computedExpandIcon = computed(() => {
+  if (isTree.value) return "layui-icon-right";
+  return level.value === 2 ? "layui-icon-down" : "layui-icon-right";
+});
+
+const computedPlacement = computed(() => {
+  return !isTree.value && level.value === 2 ? "bottom" : "right-start";
+});
+</script>
+
+<template>
+  <lay-dropdown
+    trigger="hover"
+    class="layui-sub-menu-popup"
+    :placement="computedPlacement"
+    :autoFitMinWidth="false"
+    :updateAtScroll="true"
+    :contentOffset="3"
+  >
+    <li class="layui-nav-item">
+      <a href="javascript:void(0)" style="justify-content: space-between">
+        <div>
+          <i v-if="$slots.icon" class="layui-sub-menu-icon">
+            <slot name="icon"></slot>
+          </i>
+          <span v-if="$slots.title">
+            <slot name="title"></slot>
+          </span>
+        </div>
+        <span v-if="$slots.expandIcon" class="layui-nav-more">
+          <slot name="expandIcon">
+            <lay-icon :type="computedExpandIcon" />
+          </slot>
+        </span>
+      </a>
+    </li>
+    <template #content>
+      <div
+        :class="[
+          'layui-sub-menu-popup-content',
+          `layui-sub-menu-popup-theme${computedTheme}`,
+        ]"
+      >
+        <slot></slot>
+      </div>
+    </template>
+  </lay-dropdown>
+</template>

src/component/subMenu/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/subMenu/index.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+export default {
+  name: "LaySubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, inject, ref, Ref, useSlots, watchEffect } from "vue";
+import LayTransition from "../transition/index.vue";
+import SubMenuPopup from "./SubMenuPopup.vue";
+import { indentHandle } from "../menu/utils";
+import { provideLevel, default as useLevel } from "../menu/useLevel";
+
+export interface SubMenuProps {
+  id: string;
+  title?: string;
+}
+
+const slots = useSlots();
+const props = defineProps<SubMenuProps>();
+
+const { level } = useLevel();
+const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
+const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
+const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+const indent = inject("indent") as Ref<string | boolean>;
+const isCollapse: Ref<boolean | string> = inject("isCollapse") as Ref<
+  boolean | string
+>;
+const isCollapseTransition: Ref<boolean> = inject(
+  "isCollapseTransition"
+) as Ref<boolean>;
+
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+
+const nextLevel = computed(() => level.value + 1);
+
+provideLevel(nextLevel);
+
+const needPopup = ref(false);
+watchEffect(() => {
+  if (isTree.value) {
+    const _isCollapse =
+      isCollapse.value === true || isCollapse.value === "true";
+    if (_isCollapse && level.value === 1) {
+      setTimeout(() => {
+        needPopup.value = isTree.value && _isCollapse;
+      }, 200);
+    } else {
+      needPopup.value = isTree.value && _isCollapse;
+    }
+  } else if (slots.default && slots.default().length > 0) {
+    needPopup.value = true;
+  }
+});
+
+const openHandle = function () {
+  if (!isCollapse.value) {
+    let newOpenKeys = [...openKeys.value];
+    if (openKeys.value.includes(props.id)) {
+      newOpenKeys.splice(newOpenKeys.indexOf(props.id), 1);
+    } else {
+      newOpenKeys.push(props.id);
+    }
+    openKeys.value = newOpenKeys;
+  }
+};
+</script>
+
+<template>
+  <li v-if="!needPopup" class="layui-nav-item">
+    <a
+      href="javascript:void(0)"
+      @click="openHandle()"
+      :style="indentHandle({ indent, level, basePadding: 23, isTree })"
+    >
+      <!-- 图标 -->
+      <i v-if="slots.icon" class="layui-sub-menu-icon">
+        <slot name="icon"></slot>
+      </i>
+      <!-- 标题 -->
+      <span>
+        <slot v-if="slots.title" name="title"></slot>
+      </span>
+      <!-- 扩展 -->
+      <i v-if="slots.expandIcon" class="layui-nav-more">
+        <slot name="expandIcon" :isExpand="isOpen"></slot>
+      </i>
+      <i
+        v-else
+        :class="[
+          isOpen ? 'layui-nav-mored' : '',
+          'layui-icon layui-icon-down',
+          'layui-nav-more',
+        ]"
+      ></i>
+    </a>
+    <template v-if="isTree">
+      <lay-transition :enable="isCollapseTransition">
+        <div v-if="isOpen">
+          <dl class="layui-nav-child">
+            <slot></slot>
+          </dl>
+        </div>
+      </lay-transition>
+    </template>
+  </li>
+  <SubMenuPopup v-else :id="id">
+    <template v-if="slots.icon" #icon>
+      <slot name="icon"></slot>
+    </template>
+    <template v-if="slots.title" #title>
+      <slot name="title"></slot>
+    </template>
+    <template #expandIcon>
+      <slot name="expandIcon"></slot>
+    </template>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
+  </SubMenuPopup>
+</template>