feat(Tooltip): 支持多个展开方向

Author: CoderTongxin

packages/devui-vue/devui/tooltip/src/tooltip-types.ts

@@ -1,6 +1,19 @@
 import type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue';
 
-export type BasePlacement = 'top' | 'right' | 'bottom' | 'left';
+export type Alignment = 'start' | 'end';
+export type BasePlacement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-start'
+  | 'top-end'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end';
 
 export const tooltipProps = {
   content: {
@@ -11,6 +24,10 @@ export const tooltipProps = {
     type: [String, Array] as PropType<BasePlacement | Array<BasePlacement>>,
     default: 'top',
   },
+  align: {
+    type: String as PropType<Alignment> | null,
+    default: null,
+  },
   showAnimation: {
     type: Boolean,
     default: true,
@@ -34,7 +51,7 @@ export const tooltipProps = {
   hideAfter: {
     type: Number,
     default: 0,
-  }
+  },
 };
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;

packages/devui-vue/devui/tooltip/src/tooltip.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'DTooltip',
   props: tooltipProps,
   setup(props: TooltipProps, { slots }) {
-    const { showAnimation, content } = toRefs(props);
+    const { showAnimation, content, align } = toRefs(props);
     const origin = ref<HTMLElement>();
     const tooltipRef = ref<HTMLElement>();
     const { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseleave, onMouseenterOverlay } = useTooltip(
@@ -37,6 +37,7 @@ export default defineComponent({
               class={className.value}
               origin={origin.value}
               position={positionArr.value}
+              align={align.value}
               offset={6}
               show-arrow
               style={overlayStyles.value}