♻️(component): [dropdown]placement 兼容旧版废弃属性

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

@@ -45,6 +45,7 @@ import {
 import TeleportWrapper from "../_components/teleportWrapper.vue";
 import { useFirstElement } from "./useFirstElement";
 import RenderFunction from "../_components/renderFunction";
+import { transformPlacement } from "./util";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -90,6 +91,9 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   alignPoint: false,
   popupContainer: "body",
 });
+
+const emit = defineEmits(["show", "hide"]);
+
 const slots = useSlots();
 const attrs = useAttrs();
 const childrenRefs = new Set<Ref<HTMLElement>>();
@@ -120,7 +124,9 @@ const triggerMethods = computed(() =>
   ([] as Array<DropdownTrigger>).concat(props.trigger)
 );
 
-const emit = defineEmits(["show", "hide"]);
+const computedPlacement = computed(() => {
+  return transformPlacement(props.placement);
+});
 
 let delayTimer = 0;
 
@@ -215,7 +221,11 @@ const updateContentStyle = () => {
     ? getTriggerRect()
     : getElementScrollRect(dropdownRef.value, containerRect);
   const contentRect = getElementScrollRect(contentRef.value, containerRect);
-  const { style } = getContentStyle(props.placement, triggerRect, contentRect);
+  const { style } = getContentStyle(
+    computedPlacement.value,
+    triggerRect,
+    contentRect
+  );
 
   if (props.autoFitMinWidth) {
     style.minWidth = `${triggerRect.width}px`;
@@ -240,7 +250,7 @@ const updateContentStyle = () => {
       const { top: fitTop, left: fitLeft } = getFitPlacement(
         top,
         left,
-        props.placement,
+        computedPlacement.value,
         triggerRect,
         contentRect
       );

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

@@ -1,4 +1,15 @@
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+export type DropdownPlacementLegacy =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "right-top"
+  | "right-bottom"
+  | "left-top"
+  | "left-bottom";
+
 export type DropdownPlacement =
   | "top"
   | "top-start"
@@ -11,7 +22,8 @@ export type DropdownPlacement =
   | "right-end"
   | "left"
   | "left-start"
-  | "left-end";
+  | "left-end"
+  | DropdownPlacementLegacy;
 
 export interface ElementScrollRect {
   top: number;

package/component/src/component/dropdown/util.ts

@@ -0,0 +1,22 @@
+import { DropdownPlacement } from "./interface";
+
+export const transformPlacement = (
+  placement: DropdownPlacement
+): DropdownPlacement => {
+  const shouldTransform = placement.includes("-");
+  const placementMap: any = {
+    top: "start",
+    left: "start",
+    bottom: "end",
+    right: "end",
+  };
+
+  if (shouldTransform) {
+    const separated = placement.split("-");
+    return `${separated[0]}-${
+      placementMap[separated[1]] || separated[1]
+    }` as DropdownPlacement;
+  }
+
+  return placement;
+};