theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sight 2022-06-22 21:43:04 +08:00
parent 3dc698c99e
commit 8d9ef82cb3
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package/component/src/component/dropdown/index.vue
View File

@ -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:

12
package/document/src/document/zh-CN/components/dropdown.md
View File

@ -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| -|
:::