✨(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>
+  <li
-    <div class="layui-menu-body-title" @click="handleClick">
+    @click="handleClick"
-      <slot></slot>
+    :style="$slots.suffix ? `justify-content: space-between;` : ''"
-    </div>
+  >
+    <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,

package/document-component/src/document/zh-CN/components/dropdown.md

@@ -362,6 +362,104 @@ export default {
 
 :::
 
+::: title 菜单插槽
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button type="primary">图标菜单</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-return"></lay-icon></template>
+            <template #default>返回</template>
+            <template #suffix><span style="margin-left: 50px; font-size:10px">Alt + 向左键</span></template>
+          </lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-refresh"></lay-icon></template>
+            <template #default>刷新</template>
+            <template #suffix><span style="font-size:10px">Ctrl + R</span></template>
+          </lay-dropdown-menu-item>
+          <lay-line></lay-line>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
+            <template #default>更多</template>
+            <template #suffix><lay-icon type="layui-icon-right"></lay-icon></template>
+          </lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 多级菜单
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button type="primary">下拉菜单</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-list"></lay-icon></template>
+            <template #default>选项一</template>
+          </lay-dropdown-menu-item>
+          <lay-dropdown-sub-menu>
+            <template #prefix><lay-icon type="layui-icon-set-sm"></lay-icon></template>
+            <template #default>选项二</template>
+            <template #content>
+              <lay-dropdown-menu-item>子菜单一</lay-dropdown-menu-item>
+              <lay-dropdown-menu-item>子菜单二</lay-dropdown-menu-item>
+              <lay-dropdown-sub-menu>
+                <template #default>子菜单三</template>
+                <template #content>
+                   <lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item>
+                   <lay-dropdown-menu-item>菜单2</lay-dropdown-menu-item>
+                   <lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
+                </template>
+              </lay-dropdown-sub-menu>
+            </template>
+          </lay-dropdown-sub-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-share"></lay-icon></template>
+            <template #default>选项三</template>
+          </lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 其它属性
 :::
 
@@ -498,6 +596,47 @@ export default {
 
 :::
 
+::: title Dropdown Menu Item 插槽
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| prefix | 前缀 | --     |
+| default | 默认 | --     |
+| suffix | 后缀|--|
+
+:::
+
+::: title Dropdown Sub Menu 属性
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover  | `click` `hover` `focus` `contextMenu` |
+| disabled | 是否禁用触发 | `true` `false` |
+| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-left` `*-right` `*-top` `*-bottom`|
+| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| 
+
+:::
+
+::: title Dropdown Sub Menu 插槽
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| prefix | 前缀 | --     |
+| default | 默认 | --     |
+| suffix | 后缀|--|
+| content | 下拉面板内容|--|
+
+:::
+
 
 ::: contributor dropdown
 :::

package/layer/src/component/Notifiy.vue

@@ -17,43 +17,46 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from "vue";
-import CloseBtnVue from './CloseBtn.vue';
+import CloseBtnVue from "./CloseBtn.vue";
 
 export interface LayNotifyProps {
   title: any;
   content: any;
   isHtmlFragment?: boolean;
-  icon?: string | number | undefined,
+  icon?: string | number | undefined;
-  iconClass: string[]
+  iconClass: string[];
 }
 const props = withDefaults(defineProps<LayNotifyProps>(), {
   isHtmlFragment: false,
-
 });
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(["close"]);
 const close = () => {
-  emit('close')
+  emit("close");
-}
+};
-function addClass(obj: { className: any; }, cls: string) {
+function addClass(obj: { className: any }, cls: string) {
   //获取 class 内容.
   let obj_class = obj.className,
     //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
-    blank = (obj_class != '') ? ' ' : '';
+    blank = obj_class != "" ? " " : "";
   let added = obj_class + blank + cls; //组合原来的 class 和需要添加的 class.
   obj.className = added; //替换原来的 class.
 }
 
-const notifyRef = ref<HTMLElement | null>(null)
+const notifyRef = ref<HTMLElement | null>(null);
 onMounted(() => {
   nextTick(() => {
     if (notifyRef.value) {
-      setTimeout(() => {//此处延迟加载class，以免影响弹出效果
+      setTimeout(() => {
+        //此处延迟加载class，以免影响弹出效果
         // @ts-ignore
-        addClass(notifyRef.value.parentElement?.parentElement, 'layui-layer-notify')
+        addClass(
+          notifyRef.value.parentElement?.parentElement,
+          "layui-layer-notify"
+        );
       }, 300);
     }
-  })
+  });
-})
+});
 </script>

package/layer/src/component/index.vue

@@ -187,7 +187,7 @@ const firstOpenDelayCalculation = function () {
     }
     offset.value = calculateOffset(props.offset, area.value, props.type);
     if (type == 6) {
-      offset.value = calculateNotifOffset(props.offset, area.value, id.value)
+      offset.value = calculateNotifOffset(props.offset, area.value, id.value);
     }
     w.value = area.value[0];
     h.value = area.value[1];
@@ -441,7 +441,8 @@ const styles = computed<any>(() => {
         offset.value[1].indexOf("%") > -1
       ) {
         // @ts-ignore
-        style.transform = `translate(-${style.left.indexOf("%") > -1 ? style.left : 0
+        style.transform = `translate(-${
+          style.left.indexOf("%") > -1 ? style.left : 0
         },-${style.top.indexOf("%") > -1 ? style.top : 0})`;
       }
     }
@@ -469,14 +470,13 @@ const contentClasses = computed(() => {
  * @param null
  */
 const closeHandle = () => {
-
   emit("close");
   emit("update:modelValue", false);
   props.destroy();
 
   //Notify 从队列中移除当前实例
   if (type === 6) {
-    removeNotifiyFromQueen(props.id)
+    removeNotifiyFromQueen(props.id);
   }
 };
 
@@ -619,15 +619,33 @@ defineExpose({ reset, open, close });
 <template>
   <div>
     <!-- 遮盖层 -->
-    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
+    <Shade
+      :index="index"
+      :visible="shadeVisible"
+      :opacity="shadeOpacity"
+      @shadeClick="shadeHandle"
+    ></Shade>
     <!-- 动画容器 -->
-    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
+    <transition
+      :enter-active-class="enterActiveClass"
+      :leave-active-class="leaveActiveClass"
+    >
       <!-- 弹出层 -->
-      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
+      <div
+        ref="layero"
+        class="layui-layer layui-layer-border"
+        :class="boxClasses"
+        :style="styles"
+        v-if="visible"
+      >
         <!-- 标题 -->
         <Title v-if="showTitle" :title="title"></Title>
         <!-- 内容 -->
-        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
+        <div
+          class="layui-layer-content"
+          :style="{ height: contentHeight }"
+          :class="contentClasses"
+        >
           <template v-if="type === 0 || type === 1 || type === 4">
             <i v-if="icon" :class="iconClass"></i>
             <slot v-if="slots.default"></slot>
@@ -639,22 +657,51 @@ defineExpose({ reset, open, close });
             </template>
           </template>
           <Iframe v-if="type === 2" :src="props.content"></Iframe>
-          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex" @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
+          <Photos
-          <Notifiy v-if="type === 6" @close="closeHandle" :title="props.title" :content="props.content" :isHtmlFragment="props.isHtmlFragment" :icon="props.icon" :iconClass="iconClass"></Notifiy>
+            v-if="type === 5"
+            :imgList="props.imgList"
+            :startIndex="props.startIndex"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"
+          ></Photos>
+          <Notifiy
+            v-if="type === 6"
+            @close="closeHandle"
+            :title="props.title"
+            :content="props.content"
+            :isHtmlFragment="props.isHtmlFragment"
+            :icon="props.icon"
+            :iconClass="iconClass"
+          ></Notifiy>
         </div>
         <!-- 工具栏 -->
-        <span class="layui-layer-setwin" v-if="type != 3 && type != 5 && type != 6">
+        <span
-          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
+          class="layui-layer-setwin"
-            href="javascript:;" @click="minHandle">
+          v-if="type != 3 && type != 5 && type != 6"
+        >
+          <a
+            v-if="maxmin && !max"
+            class="layui-layer-min"
+            :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="minHandle"
+          >
             <cite v-if="!min"></cite>
           </a>
-          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
+          <a
-            href="javascript:;" @click="maxHandle"></a>
+            v-if="maxmin && !min"
+            class="layui-layer-ico layui-layer-max"
+            :class="[max ? 'layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="maxHandle"
+          ></a>
           <CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
         </span>
         <!-- 操作栏 -->
-        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
+        <div
-          :class="[`layui-layer-btn-${btnAlign}`]">
+          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          class="layui-layer-btn"
+          :class="[`layui-layer-btn-${btnAlign}`]"
+        >
           <template v-if="btn && btn.length > 0">
             <template v-for="(b, index) in btn" :key="index">
               <a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{

package/layer/src/index.ts

@@ -140,14 +140,14 @@ const layer = {
   },
   //通知
   notifiy: (option: any = {}, callback?: Function) => {
-    option.anim = 5
+    option.anim = 5;
-    option.shade = false
+    option.shade = false;
-    option.type = 6
+    option.type = 6;
     let defaultOption = {
-      offset: 'rt',
+      offset: "rt",
       time: 2000,
-      area:'auto'
+      area: "auto",
-    }
+    };
     return layer.create(option, defaultOption, callback);
   },
   // 创建弹出层
@@ -186,7 +186,11 @@ const layer = {
     // 调用 open 函数
     modalInstance.component?.exposed?.open();
     // 延时 time 销毁
-    if (defaultOption && defaultOption.time != undefined && defaultOption.time != 0) {
+    if (
+      defaultOption &&
+      defaultOption.time != undefined &&
+      defaultOption.time != 0
+    ) {
       timer = setTimeout(() => {
         modalInstance.component?.exposed?.close();
         if (callback) callback(modalContainer.id);
@@ -200,7 +204,7 @@ const layer = {
         delInstance(modalContainer.id);
         //Notifiy特殊处理
         if (options.type === 6) {
-          removeNotifiyFromQueen(options.id)
+          removeNotifiyFromQueen(options.id);
         }
       }, defaultOption.time);
     }

package/layer/src/utils/index.ts

@@ -286,7 +286,8 @@ export async function calculatePhotosArea(url: string, options: object) {
 // 计算Notify位置 队列 此处先暂时定义Notify的间距为15px
 export function calculateNotifOffset(offset: any, area: any, layerId: string) {
   let arr = ["lt", "lb", "rt", "rb"];
-  let t = '0', l = '0';
+  let t = "0",
+    l = "0";
   // 间隙
   let transOffsetLeft = 15;
   let transOffsetTop = 15;
@@ -294,23 +295,25 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
   window.NotifiyQueen = window.NotifiyQueen || [];
   // @ts-ignore
   let notifiyQueen = window.NotifiyQueen;
-  if (typeof offset != 'string' || arr.indexOf(offset) === -1) {
+  if (typeof offset != "string" || arr.indexOf(offset) === -1) {
     offset = "rt";
   }
   // 当前区域元素集合
-  let nodeList = notifiyQueen.filter((e: { offset: any; }) => {
+  let nodeList = notifiyQueen.filter((e: { offset: any }) => {
     if (e.offset === offset) {
-      return e
+      return e;
     }
-  })
+  });
   //前一个元素
   let prevNode = nodeList.length > 0 ? nodeList[nodeList.length - 1] : null;
   if (prevNode) {
-    prevNode = document.getElementById(prevNode['id'])?.firstElementChild?.firstElementChild;
+    prevNode = document.getElementById(prevNode["id"])?.firstElementChild
+      ?.firstElementChild;
     if (offset === "rt" || offset === "lt") {
-      transOffsetTop += prevNode.offsetHeight + parseFloat(prevNode.style['top'])
+      transOffsetTop +=
+        prevNode.offsetHeight + parseFloat(prevNode.style["top"]);
     } else {
-      let bottom = parseFloat(prevNode.style['top'].split(' - ')[1])
+      let bottom = parseFloat(prevNode.style["top"].split(" - ")[1]);
       transOffsetTop += prevNode.offsetHeight + bottom;
     }
   } else {
@@ -324,20 +327,20 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
     t = transOffsetTop + "px";
     l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)";
   } else if (offset === "rb") {
-    t = "calc(100vh - " + transOffsetTop + "px)"
+    t = "calc(100vh - " + transOffsetTop + "px)";
     l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)";
   } else if (offset === "lt") {
     t = transOffsetTop + "px";
     l = transOffsetLeft + "px";
   } else if (offset === "lb") {
-    t = "calc(100vh - " + transOffsetTop + "px)"
+    t = "calc(100vh - " + transOffsetTop + "px)";
     l = transOffsetLeft + "px";
   }
 
   notifiyQueen.push({
     id: layerId,
-    offset: offset
+    offset: offset,
-  })
+  });
   // 返回位置
   return [t, l];
 }
@@ -347,33 +350,40 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
   // 间隙
   let transOffsetTop = 15;
   // @ts-ignore 删除项的高度
-  let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild?.offsetHeight;
+  let offsetHeight =
+    document.getElementById(layerId)?.firstElementChild?.firstElementChild
+      ?.offsetHeight;
   // @ts-ignore
   window.NotifiyQueen = window.NotifiyQueen || [];
   // @ts-ignore
   let notifiyQueen = window.NotifiyQueen;
   //console.log(notifiyQueen)
-  let index = notifiyQueen.findIndex((e: { id: string; }) => e.id === layerId)
+  let index = notifiyQueen.findIndex((e: { id: string }) => e.id === layerId);
   let offsetType = notifiyQueen[index].offset;
-  let list = notifiyQueen.filter((e: { offset: any; }) => {
+  let list = notifiyQueen.filter((e: { offset: any }) => {
     if (e.offset === offsetType) {
       return e;
     }
-  })
+  });
-  let findIndex = list.findIndex((e: { id: string; }) => e.id === layerId)
+  let findIndex = list.findIndex((e: { id: string }) => e.id === layerId);
   // //得到需要修改的定位的Notifiy集合
-  let needCalculatelist = list.slice(findIndex + 1)
+  let needCalculatelist = list.slice(findIndex + 1);
-  needCalculatelist.forEach((e: { id: string; }) => {
+  needCalculatelist.forEach((e: { id: string }) => {
-    let dom = document.getElementById(e.id)?.firstElementChild?.firstElementChild
+    let dom = document.getElementById(e.id)?.firstElementChild
-    if (offsetType === 'rt' || offsetType === 'lt') {
+      ?.firstElementChild;
+    if (offsetType === "rt" || offsetType === "lt") {
       // @ts-ignore
-      dom.style['top'] = parseFloat(dom.style['top']) - transOffsetTop - offsetHeight + 'px'
+      dom.style["top"] =
+        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
     } else {
       // @ts-ignore
-      let bottom = parseFloat(dom.style['top'].split(' - ')[1]) - transOffsetTop - offsetHeight
+      let bottom =
+        parseFloat(dom.style["top"].split(" - ")[1]) -
+        transOffsetTop -
+        offsetHeight;
       // @ts-ignore
-      dom.style['top'] = "calc(100vh - " + bottom + "px)"
+      dom.style["top"] = "calc(100vh - " + bottom + "px)";
     }
-  })
+  });
   notifiyQueen.splice(index, 1); //删除
 }