✨(dropdown): 修改 context-menu 弹出策略, 仅更改触发不方式, 不影响弹出方案

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

@@ -6,8 +6,6 @@
 .layui-dropdown dl {
   display: none;
   position: absolute;
-  left: var(--layui-dropdown-left);
-  top: var(--layui-dropdown-top);
   margin-top: 2px;
   z-index: 899;
   min-width: 100%;
@@ -26,7 +24,6 @@
   display: block;
 }
 
-
 .layui-dropdown .layui-menu {
   position: relative;
   background-color: #fff;

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

@@ -21,27 +21,18 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 });
 
 const openState = ref(false);
-const dropdownRef = ref<null | HTMLElement>(null);
+const dropdownRef = ref<null | HTMLElement>();
 const dropdownX = ref<number | string>(0);
 const dropdownY = ref<number | string>("auto");
 const emit = defineEmits(["open", "hide"]);
-// @ts-ignore
+
-onClickOutside(dropdownRef, (event) => {
+onClickOutside(dropdownRef, () => {
   openState.value = false;
 });
 
 const open = function (event?: Event): void {
   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");
   }
@@ -61,11 +52,6 @@ const toggle = function (event?: Event): void {
     }
 };
 
-const dropdownStyle = computed(() => ({
-  "--layui-dropdown-left": dropdownX.value,
-  "--layui-dropdown-top": dropdownY.value,
-}));
-
 provide("openState", openState);
 
 defineExpose({ open, hide, toggle });
@@ -78,7 +64,6 @@ defineExpose({ open, hide, toggle });
     @mouseenter="trigger === 'hover' && open()"
     @mouseleave="trigger === 'hover' && hide()"
     :class="{ 'layui-dropdown-up': openState }"
-    :style="dropdownStyle"
   >
     <div
       @click="trigger === 'click' && toggle()"

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

@@ -158,6 +158,34 @@ export default {
 
 :::
 
+::: title 位置优化
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button type="primary">下拉菜单</lay-button>
+    <template #content>
+      <div style="width:300px;height:200px;"></div> 
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Dropdown 属性
 :::
 

package/document/src/layouts/Layout.vue

@@ -76,27 +76,27 @@
                 </lay-icon>
               </a>
               <template #content>
-                <div style="width: 380px; padding: 0px 10px 10px 10px">
+                <div class="theme-panel">
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-primary-color']"
                   ></lay-color-picker
-                  >&nbsp;
+                  >
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-normal-color']"
                   ></lay-color-picker
-                  >&nbsp;
+                  >
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-warm-color']"
                   ></lay-color-picker
-                  >&nbsp;
+                  >
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-danger-color']"
                   ></lay-color-picker
-                  >&nbsp;
+                  >
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-checked-color']"
                   ></lay-color-picker
-                  >&nbsp;
+                  >
                   <lay-input
                     v-model="appStore.themeVariable['--global-border-radius']"
                     style="display: inline-block; width: 130px"
@@ -104,31 +104,24 @@
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-1']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-2']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-3']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-4']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-5']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-6']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-7']"
                   ></lay-color-picker>
-                  &nbsp;
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-8']"
                   ></lay-color-picker>
@@ -394,4 +387,13 @@ export default {
   top: 3px;
   left: 3px;
 }
+
+.theme-panel {
+  width: 380px; 
+  padding: 0px 10px 10px 10px
+}
+
+.theme-panel > * {
+  margin-right: 9px;
+}
 </style>

package/document/src/plugin/highlight.ts

@@ -41,4 +41,4 @@ export default (str: string, lang: string): string => {
     return wrap(code, rawLang);
   }
   return wrap(str, "text");
-};
+};

package/document/src/router/index.ts

@@ -1,6 +1,5 @@
 import {
   createRouter as _createRouter,
-  createWebHashHistory,
   createWebHistory,
   Router,
 } from "vue-router";