fix(tooltip): support adjust the tooltip position that overstep the boundary
This commit is contained in:
Sagi
parent
879c3c9dc2
commit
7f142a71af
|
|
@ -1,3 +1,4 @@
|
|||
import { DomEvent } from "@vue/test-utils/dist/constants/dom-events";
|
||||
import { SetupContext } from "vue";
|
||||
import { TooltipPlacement, TooltipProps } from "../tooltip.props";
|
||||
import { RectPosition, TooltipPosition } from "./types";
|
||||
|
|
@ -28,10 +29,15 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
|
|||
placementAndAlignment: TooltipPlacement,
|
||||
originalPosition: TooltipPosition,
|
||||
relativeElementRect: DOMRect,
|
||||
tooltipRect: DOMRect
|
||||
hostRect: DOMRect,
|
||||
tooltipRect: DOMRect,
|
||||
tooltipContentRect: DOMRect,
|
||||
arrowRect: DOMRect
|
||||
): TooltipPosition {
|
||||
let fixedLeft = originalPosition.tooltip.left;
|
||||
let fixedTop = originalPosition.tooltip.top;
|
||||
let fixedArrowLeft = originalPosition.arrow.left;
|
||||
let fixedArrowTop = originalPosition.arrow.top;
|
||||
const placementAndAlignmentArray = placementAndAlignment.split('-');
|
||||
const placement = placementAndAlignmentArray[0];
|
||||
if (['top', 'bottom'].includes(placement)) {
|
||||
|
|
@ -40,14 +46,24 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
|
|||
fixedLeft = overLeftBound.overBound ?
|
||||
overLeftBound.fixedValue :
|
||||
(overRightBound.overBound ? overRightBound.fixedValue - tooltipRect.width : originalPosition.tooltip.left);
|
||||
fixedArrowLeft = overLeftBound.overBound ?
|
||||
tooltipRect.width - ((fixedLeft + tooltipRect.width) - hostRect.right) - arrowRect.width :
|
||||
(overRightBound.overBound ? hostRect.left - fixedLeft : originalPosition.arrow.left);
|
||||
}
|
||||
const overTopBound = isOverstepBoundary(relativeElementRect, 'top', originalPosition.tooltip.top);
|
||||
const overBottomBound = isOverstepBoundary(relativeElementRect, 'bottom', originalPosition.tooltip.top + tooltipRect.height);
|
||||
fixedTop = overTopBound.overBound ?
|
||||
overTopBound.fixedValue :
|
||||
(overBottomBound.overBound ? overBottomBound.fixedValue - tooltipRect.height : originalPosition.tooltip.top);
|
||||
fixedArrowTop = overTopBound.overBound ?
|
||||
(originalPosition.arrow.top) :
|
||||
(overBottomBound.overBound ?
|
||||
(
|
||||
tooltipRect.height - ((fixedTop + tooltipRect.height) - hostRect.top)
|
||||
) :
|
||||
originalPosition.arrow.top);
|
||||
const tooltip = { left: fixedLeft, top: fixedTop };
|
||||
const arrow = { left: originalPosition.arrow.left, top: originalPosition.arrow.top };
|
||||
const arrow = { left: fixedArrowLeft, top: fixedArrowTop };
|
||||
return { arrow, tooltip };
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ export function useTooltipPosition(
|
|||
tooltipContentRect: DOMRect,
|
||||
arrowRect: DOMRect) {
|
||||
|
||||
const { scrollLeft, scrollTop } = document.documentElement;
|
||||
|
||||
const placementAndAlignment = ref(props.placement);
|
||||
|
||||
const { getRelativeElementBound } = useRelative(props, context);
|
||||
|
|
@ -34,7 +32,9 @@ export function useTooltipPosition(
|
|||
const relativeRect = getRelativeElementBound();
|
||||
placementAndAlignment.value = adjustPlacement(placementAndAlignment.value, relativeRect, hostRect, tooltipRect, arrowRect);
|
||||
const originalPosition = calculate(placementAndAlignment.value, hostRect, tooltipRect, tooltipContentRect, arrowRect);
|
||||
const position = adjustPosition(placementAndAlignment.value, originalPosition, relativeRect, tooltipRect);
|
||||
const position = adjustPosition(
|
||||
placementAndAlignment.value, originalPosition, relativeRect, hostRect, tooltipRect, tooltipContentRect, arrowRect
|
||||
);
|
||||
return position;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ export default defineComponent({
|
|||
return classObject;
|
||||
});
|
||||
|
||||
const { scrollLeft, scrollTop } = document.documentElement;
|
||||
|
||||
const shouldShowTooltipText = computed(() => isTextContext.value);
|
||||
|
||||
const tooltipText = computed(() => props.content);
|
||||
|
|
@ -64,9 +66,8 @@ export default defineComponent({
|
|||
tooltipInnerRef.value.getBoundingClientRect(),
|
||||
arrowRef.value.getBoundingClientRect()
|
||||
);
|
||||
tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left}px`;
|
||||
tooltipRightPosition.value = `${tooltipPosition.value.tooltip.right}px`;
|
||||
tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top}px`;
|
||||
tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left + scrollLeft}px`;
|
||||
tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top + scrollTop}px`;
|
||||
arrowLeftPosition.value = `${tooltipPosition.value.arrow.left}px`;
|
||||
arrowTopPosition.value = `${tooltipPosition.value.arrow.top}px`;
|
||||
placement.value = tooltipPlacement.value;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const tooltipDirective = {
|
|||
element.addEventListener('mouseleave', ($event: MouseEvent) => {
|
||||
$event.stopPropagation();
|
||||
if (app) {
|
||||
// app.unmount();
|
||||
app.unmount();
|
||||
app = null;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,12 +10,39 @@ const tooltipProps = { placement: 'bottom' };
|
|||
|
||||
<Button v-tooltip="{ placement: 'top-right' }"> 显示提示信息 </Button>
|
||||
|
||||
<div id="tooltipContainer" style="width: 200px; height: 200px; background: antiquewhite; display: flex">
|
||||
<div>
|
||||
<div id="tooltipContainer1" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
|
||||
1
|
||||
<Button
|
||||
style="margin: auto 0 auto auto"
|
||||
v-tooltip="{ placement: 'top-left', referenceV: '#tooltipContainer', referenceH: '#tooltipContainer' }"
|
||||
v-tooltip="{ placement: 'right', verticalRelative: '#tooltipContainer1', horizontalRelative: '#tooltipContainer1' }"
|
||||
>
|
||||
显示提示信息
|
||||
</Button>
|
||||
</div>
|
||||
<div id="tooltipContainer2" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
|
||||
<Button
|
||||
style="margin: auto auto auto 0px"
|
||||
v-tooltip="{ placement: 'left', verticalRelative: '#tooltipContainer2', horizontalRelative: '#tooltipContainer2' }"
|
||||
>
|
||||
显示提示信息
|
||||
</Button>
|
||||
</div>
|
||||
<div id="tooltipContainer3" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
|
||||
<Button
|
||||
style="margin: 0px auto auto auto"
|
||||
v-tooltip="{ placement: 'bottom', verticalRelative: '#tooltipContainer3', horizontalRelative: '#tooltipContainer3' }"
|
||||
>
|
||||
显示提示信息
|
||||
</Button>
|
||||
</div>
|
||||
<div id="tooltipContainer4" style="width: 250px; height: 250px; background: antiquewhite; display: inline-flex">
|
||||
<Button
|
||||
style="margin: auto auto 0px auto"
|
||||
v-tooltip="{ placement: 'top', verticalRelative: '#tooltipContainer4', horizontalRelative: '#tooltipContainer4' }"
|
||||
>
|
||||
显示提示信息
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue