✨(component): [dropdown]: contentOffset属性，控制触发器距离面板的偏移距离

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

@@ -33,6 +33,7 @@ export interface LayDropdownProps {
   updateAtScroll?: boolean;
   autoFixPosition?: boolean;
   clickOutsideToClose?: boolean;
+  contentOffset?: number;
 }
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
@@ -45,6 +46,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   updateAtScroll: false,
   autoFixPosition: true,
   clickOutsideToClose: true,
+  contentOffset: 2,
 });
 
 const dropdownRef = shallowRef<HTMLElement | undefined>();
@@ -52,7 +54,6 @@ const contentRef = shallowRef<HTMLElement | undefined>();
 const contentStyle = ref<CSSProperties>({});
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 const openState = ref(false);
-const contentSpace = 2;
 
 const emit = defineEmits(["open", "hide"]);
 
@@ -156,11 +157,11 @@ const getFitPlacement = (
 ) => {
   // 溢出屏幕底部
   if (triggerRect.bottom + contentRect.height > windowHeight.value) {
-    top = -contentRect.height - contentSpace;
+    top = -contentRect.height - props.contentOffset;
   }
   // 溢出屏幕顶部
   if (triggerRect.top - contentRect.height < 0) {
-    top = triggerRect.height + contentSpace;
+    top = triggerRect.height + props.contentOffset;
   }
   if (["bottom-right", "top-right"].includes(placement)) {
     // 溢出屏幕左边
@@ -208,32 +209,32 @@ const getContentOffset = (
   switch (placement) {
     case "top":
       return {
-        top: -contentRect.height - contentSpace,
+        top: -contentRect.height - props.contentOffset,
         left: -(contentRect.width - triggerRect.width) / 2,
       };
     case "top-left":
       return {
-        top: -contentRect.height - contentSpace,
+        top: -contentRect.height - props.contentOffset,
         left: 0,
       };
     case "top-right":
       return {
-        top: -contentRect.height - contentSpace,
+        top: -contentRect.height - props.contentOffset,
         left: -(contentRect.width - triggerRect.width),
       };
     case "bottom":
       return {
-        top: triggerRect.height + contentSpace,
+        top: triggerRect.height + props.contentOffset,
         left: -(contentRect.width - triggerRect.width) / 2,
       };
     case "bottom-left":
       return {
-        top: triggerRect.height + contentSpace,
+        top: triggerRect.height + props.contentOffset,
         left: 0,
       };
     case "bottom-right":
       return {
-        top: triggerRect.height + contentSpace,
+        top: triggerRect.height + props.contentOffset,
         left: -(contentRect.width - triggerRect.width),
       };
     default:

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

@@ -240,6 +240,17 @@ export default {
     </template>
   </lay-dropdown>
       &nbsp;&nbsp;
+  <lay-dropdown placement="bottom-left" updateAtScroll :contentOffset="8">
+    <lay-button type="primary">contentOffset: 8px</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>
+      &nbsp;&nbsp;
   <lay-dropdown placement="bottom-left" :autoFixPosition="true" :clickOutsideToClose="false">
     <lay-button type="primary" :size="btnSize">autoFixPosition</lay-button>
     <template #content>
@@ -291,6 +302,7 @@ export default {
 | updateAtScroll | 是否在容器滚动时更新下拉面板的位置,默认 `false` | `true` `false` |
 | autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置,面板尺寸变化参见级联选择器,默认 `true` | `true` `false` |
 | clickOutsideToClose| 是否点击外部关闭下拉面板,默认 `true`| `true` `false`|
+| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| 
 
 
 :::