✨(component): [dropdown]menuItem 添加插槽,新增 subMenu

package/component/src/component/dropdown/index.less

@@ -34,6 +34,7 @@
 
 .layui-dropdown .layui-menu li {
   position: relative;
+  display: flex;
   line-height: 26px;
   color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
@@ -46,7 +47,19 @@
 }
 
 .layui-dropdown .layui-menu-body-title {
-  position: relative;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.layui-dropdown-menu-prefix{
+  margin-right: 8px;
+}
+.layui-dropdown-menu-suffix{
+  margin-left: 15px;
+}
+
+.layui-dropdown .layui-line-horizontal{
+  margin: 0px;
+  border-color: #EEEEEE;
 }

package/component/src/component/dropdown/index.vue

@@ -387,11 +387,15 @@ const handleClick = () => {
   }
 };
 
-const handleContextMenuClick = () => {
+const handleContextMenuClick = (e: Event) => {
   if (props.disabled || (openState.value && !props.clickToClose)) {
     return;
   }
   if (triggerMethods.value.includes("contextMenu")) {
+    e.preventDefault();
+    if (props.alignPoint) {
+      hide();
+    }
     toggle();
   }
 };
@@ -511,7 +515,7 @@ defineExpose({ open, hide, toggle });
     @focusout="handleFocusout()"
     :class="{ 'layui-dropdown-up': openState }"
   >
-    <div @click="handleClick()" @contextmenu.prevent="handleContextMenuClick()">
+    <div @click="handleClick()" @contextmenu="handleContextMenuClick">
       <slot></slot>
     </div>
     <dl

package/component/src/component/dropdownMenuItem/index.vue

@@ -15,9 +15,18 @@ const handleClick = () => {
 </script>
 
 <template>
-  <li>
-    <div class="layui-menu-body-title" @click="handleClick">
-      <slot></slot>
-    </div>
+  <li
+    @click="handleClick"
+    :style="$slots.suffix ? `justify-content: space-between;` : ''"
+  >
+    <span class="layui-menu-body-title">
+      <span v-if="$slots.prefix" class="layui-dropdown-menu-prefix">
+        <slot name="prefix" />
+      </span>
+      <slot />
+    </span>
+    <span v-if="$slots.suffix" class="layui-dropdown-menu-suffix">
+      <slot name="suffix" />
+    </span>
   </li>
 </template>

package/component/src/component/dropdownSubMenu/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;

package/component/src/component/dropdownSubMenu/index.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+  name: "LayDropdownSubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { inject, Ref } from "vue";
+import LayDropdown from "../dropdown/index.vue";
+import LayDropdownMenu from "../dropdownMenu/index.vue";
+import LayDropdownMenuItem from "../dropdownMenuItem/index.vue";
+import { LayIcon } from "@layui/icons-vue";
+import { DropdownPlacement } from "../dropdown/interface";
+
+export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+export interface LayDropdownProps {
+  trigger?: DropdownTrigger | DropdownTrigger[];
+  placement?: DropdownPlacement;
+  disabled?: boolean;
+  contentOffset?: number;
+}
+
+const props = withDefaults(defineProps<LayDropdownProps>(), {
+  trigger: "hover",
+  disabled: false,
+  placement: "right-top",
+  contentOffset: 2,
+});
+</script>
+
+<template>
+  <lay-dropdown
+    :trigger="trigger"
+    :placement="placement"
+    :auto-fit-min-width="false"
+    :contentOffset="contentOffset"
+  >
+    <lay-dropdown-menu-item>
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix" />
+      </template>
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+      <template #suffix>
+        <slot name="suffix">
+          <lay-icon type="layui-icon-right" size="14px"></lay-icon>
+        </slot>
+      </template>
+    </lay-dropdown-menu-item>
+    <template #content>
+      <lay-dropdown-menu>
+        <slot name="content" />
+      </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>

package/component/src/index.ts

@@ -57,6 +57,7 @@ import LayRate from "./component/rate/index";
 import LayDropdown from "./component/dropdown/index";
 import LayDropdownMenu from "./component/dropdownMenu/index";
 import LayDropdownMenuItem from "./component/dropdownMenuItem/index";
+import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
 import LayTab from "./component/tab/index";
 import LayTabItem from "./component/tabItem/index";
 import LayTree from "./component/tree/index";
@@ -140,6 +141,7 @@ const components: Record<string, Plugin> = {
   LayDropdown,
   LayDropdownMenu,
   LayDropdownMenuItem,
+  LayDropdownSubMenu,
   LayTab,
   LayTabItem,
   LayIconPicker,
@@ -232,6 +234,7 @@ export {
   LayDropdown,
   LayDropdownMenu,
   LayDropdownMenuItem,
+  LayDropdownSubMenu,
   LayTab,
   LayTabItem,
   LayIconPicker,