feat(dropdown): 新增上下文菜单

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

@@ -8,7 +8,8 @@
 .layui-dropdown dl {
   display: none;
   position: absolute;
-  left: 0;
+  left: var(--layui-dropdown-left);
+  top: var(--layui-dropdown-top);
   margin-top: 2px;
   z-index: 899;
   min-width: 100%;

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

@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { provide, ref } from "vue";
+import { computed, provide, ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { DropdownTrigger } from "./interface";
 
@@ -22,13 +22,25 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 const emit = defineEmits(["open", "hide"]);
 const openState = ref(false);
 const dropdownRef = ref<null | HTMLElement>(null);
+const dropdownX = ref<number | string>(0);
+const dropdownY = ref<number | string>("auto");
 
 onClickOutside(dropdownRef, (event) => {
   openState.value = false;
 });
 
-const open = function () {
+const open = function (event?: Event) {
   if (props.disabled === false) {
+    if(event){
+      const el = event.currentTarget;
+      // @ts-ignore
+      const rect = el.getBoundingClientRect();
+      // @ts-ignore
+      dropdownX.value = event.clientX - rect.left + "px";
+      // @ts-ignore
+      dropdownY.value = event.clientY - rect.top + "px";
+    }
+    
     openState.value = true;
     emit("open");
   }
@@ -39,15 +51,20 @@ const hide = function () {
   emit("hide");
 };
 
-const toggle = function () {
+const toggle = function (event?: Event) {
   if (props.disabled === false)
     if (openState.value) {
       hide();
     } else {
-      open();
+      open(event);
     }
 };
 
+const dropdownStyle = computed(() => ({
+  '--layui-dropdown-left': dropdownX.value,
+  '--layui-dropdown-top': dropdownY.value,
+}))
+
 provide("openState", openState);
 
 defineExpose({ open, hide, toggle });
@@ -60,8 +77,12 @@ defineExpose({ open, hide, toggle });
     @mouseenter="trigger === 'hover' && open()"
     @mouseleave="trigger === 'hover' && hide()"
     :class="{ 'layui-dropdown-up': openState }"
+    :style="dropdownStyle"
+  >
+    <div 
+      @click="trigger === 'click' && toggle()"
+      @contextmenu.prevent="trigger === 'contextMenu' && toggle($event)"
     >
-    <div @click="trigger === 'click' && toggle()">
       <slot></slot>
     </div>
     <dl class="layui-anim layui-anim-upbit">

package/component/src/component/dropdown/interface.ts

@@ -1 +1 @@
-export type DropdownTrigger = "click" | "hover";
+export type DropdownTrigger = "click" | "hover" | "contextMenu";

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

@@ -66,6 +66,17 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
+    &nbsp;&nbsp;
+    <lay-dropdown trigger="contextMenu">
+    <lay-button>contextMenu 触发</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
 </template>
 
 <script>
@@ -154,7 +165,7 @@ export default {
 
 | 属性    | 描述     | 可选值          |
 | ------- | -------- | --------------- |
-| trigger | 触发方式 | `click` `hover` |
+| trigger | 触发方式 | `click` `hover` `contextMenu` |
 | disabled | 是否禁用触发 | `true` `false` |
 
 :::