♻️(component): [dropdown] placement 更改为 *-start *-end

This commit is contained in:
sight
2022-08-27 23:08:15 +08:00
parent 9a80be4c37
commit 8d2acb70e1
6 changed files with 55 additions and 67 deletions

View File

@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
visible: false,
trigger: "click",
disabled: false,
placement: "bottom-left",
placement: "bottom-start",
autoFitPosition: true,
autoFitMinWidth: true,
autoFitWidth: false,
@@ -265,16 +265,16 @@ const getContentStyle = (
};
const getPosition = (placement: DropdownPlacement) => {
if (["top", "top-left", "top-right"].includes(placement)) {
if (["top", "top-start", "top-end"].includes(placement)) {
return "top";
}
if (["bottom", "bottom-left", "bottom-right"].includes(placement)) {
if (["bottom", "bottom-start", "bottom-end"].includes(placement)) {
return "bottom";
}
if (["left", "left-bottom", "left-top"].includes(placement)) {
if (["left", "left-start", "left-end"].includes(placement)) {
return "left";
}
if (["right", "right-bottom", "right-top"].includes(placement)) {
if (["right", "right-start", "right-end"].includes(placement)) {
return "right";
}
return "bottom";
@@ -345,12 +345,12 @@ const getContentOffset = (
triggerRect.scrollLeft +
Math.round((triggerRect.width - contentRect.width) / 2),
};
case "top-left":
case "top-start":
return {
top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
left: triggerRect.scrollLeft,
};
case "top-right":
case "top-end":
return {
top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
left: triggerRect.scrollRight - contentRect.width,
@@ -362,12 +362,12 @@ const getContentOffset = (
triggerRect.scrollLeft +
Math.round((triggerRect.width - contentRect.width) / 2),
};
case "bottom-left":
case "bottom-start":
return {
top: triggerRect.scrollBottom + props.contentOffset,
left: triggerRect.scrollLeft,
};
case "bottom-right":
case "bottom-end":
return {
top: triggerRect.scrollBottom + props.contentOffset,
left: triggerRect.scrollRight - contentRect.width,
@@ -379,12 +379,12 @@ const getContentOffset = (
Math.round((triggerRect.height - contentRect.height) / 2),
left: triggerRect.scrollRight + props.contentOffset,
};
case "right-top":
case "right-start":
return {
top: triggerRect.scrollTop,
left: triggerRect.scrollRight + props.contentOffset,
};
case "right-bottom":
case "right-end":
return {
top: triggerRect.scrollBottom - contentRect.height,
left: triggerRect.scrollRight + props.contentOffset,
@@ -396,12 +396,12 @@ const getContentOffset = (
Math.round((triggerRect.height - contentRect.height) / 2),
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
};
case "left-top":
case "left-start":
return {
top: triggerRect.scrollTop,
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
};
case "left-bottom":
case "left-end":
return {
top: triggerRect.scrollBottom - contentRect.height,
left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,

View File

@@ -1,17 +1,17 @@
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
export type DropdownPlacement =
| "top"
| "top-left"
| "top-right"
| "top-start"
| "top-end"
| "bottom"
| "bottom-left"
| "bottom-right"
| "bottom-start"
| "bottom-end"
| "right"
| "right-top"
| "right-bottom"
| "right-start"
| "right-end"
| "left"
| "left-top"
| "left-bottom";
| "left-start"
| "left-end";
export interface ElementScrollRect {
top: number;

View File

@@ -24,7 +24,7 @@ export interface LayDropdownSubMenuProps {
const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
trigger: "hover",
disabled: false,
placement: "right-top",
placement: "right-start",
contentOffset: 2,
});
</script>

View File

@@ -30,7 +30,7 @@ const isOpen = computed(() => {
<template>
<lay-dropdown
trigger="hover"
placement="right-top"
placement="right-start"
:autoFitMinWidth="false"
:contentOffset="3"
popupContainer="body"

View File

@@ -25,7 +25,7 @@ import {
reactive,
h,
createTextVNode,
isVNode,
isVNode,
} from "vue";
import { useResizeObserver } from "@vueuse/core";
import { TabData, TabInjectKey } from "./interface";
@@ -268,16 +268,14 @@ const update = () => {
};
const renderTabChild = (child: TabData) => {
if (child.slots?.title){
return () => h("span", child.slots?.title && child.slots.title())
if (child.slots?.title) {
return () => h("span", child.slots?.title && child.slots.title());
}
if (typeof child.title === "function"){
if (typeof child.title === "function") {
// @ts-ignore
return () => child.title();
} else if (typeof child.title === "string"){
} else if (typeof child.title === "string") {
return () => createTextVNode(child.title as string);
}
};