fix(tooltip): use placement and alignment to calculate x position of tooltip
This commit is contained in:
parent
d544bd7f5b
commit
114b48bba2
|
@ -61,12 +61,6 @@ export function useTooltipPosition(
|
|||
tooltipContentBound: DOMRect,
|
||||
arrowBound: DOMRect
|
||||
) {
|
||||
// let offsetY = 0;
|
||||
// let offsetAlignment = 0;
|
||||
// const verticalAlignment = placement.indexOf('bottom') > -1 ? 'bottom' : (placement.indexOf('top') > -1 ? 'top' : 'middle');
|
||||
// const originalPositionY = verticalAlignment === 'bottom' ? hostBound.bottom : hostBound.top;
|
||||
|
||||
|
||||
const placementAndAlignmentArray = placementAndAlignment.split('-');
|
||||
const placement = placementAndAlignmentArray[0];
|
||||
const alignment = placementAndAlignmentArray[1] || 'middle';
|
||||
|
@ -87,27 +81,48 @@ export function useTooltipPosition(
|
|||
return originalPositionY + offsetY + offsetAlignment;
|
||||
}
|
||||
|
||||
function calculateTooltipLeftPosition(placement: TooltipPlacement, hostBound: DOMRect, tooltipBound: DOMRect, arrowBound: DOMRect) {
|
||||
function calculateTooltipLeftPosition(
|
||||
placementAndAlignment: TooltipPlacement,
|
||||
hostBound: DOMRect,
|
||||
tooltipContentBound: DOMRect,
|
||||
arrowBound: DOMRect
|
||||
) {
|
||||
const placementAndAlignmentArray = placementAndAlignment.split('-');
|
||||
const placement = placementAndAlignmentArray[0];
|
||||
const alignment = placementAndAlignmentArray[1] || 'middle';
|
||||
const marginSpace = (tooltipBound.width - tooltipContentBound.width) / 2;
|
||||
const originalPositionX = placement === 'right' ? hostBound.right : hostBound.left;
|
||||
|
||||
let offsetX = 0;
|
||||
const horizontalAlignment = placement.indexOf('right') > -1 ? 'right' : (placement.indexOf('left') > -1 ? 'left' : 'center');
|
||||
const originalPositionX = horizontalAlignment === 'right' ? hostBound.right : hostBound.left;
|
||||
const offsetX = placement === 'left' ?
|
||||
0 - marginSpace - tooltipContentBound.width - arrowBound.width :
|
||||
(placement === 'right' ? (0 - marginSpace) + arrowBound.width : 0);
|
||||
|
||||
if (['left', 'left-top', 'left-bottom'].includes(placement)) {
|
||||
offsetX = 0 - tooltipBound.width - space;
|
||||
} else if (['top', 'bottom'].includes(placement)) {
|
||||
offsetX = (hostBound.width - tooltipBound.width) / 2;
|
||||
} else if (['right', 'right-top', 'right-bottom'].includes(placement)) {
|
||||
offsetX = space;
|
||||
} else if (['top-right', 'bottom-right'].includes(placement)) {
|
||||
offsetX = 0 - tooltipBound.width;
|
||||
} else if (['top-left', 'bottom-left'].includes(placement)) {
|
||||
offsetX = 0;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
const offsetAlignment = ['top', 'bottom'].includes(placement) ?
|
||||
(
|
||||
alignment === 'middle' ?
|
||||
(hostBound.width - tooltipContentBound.width) / 2 :
|
||||
(alignment === 'right' ? hostBound.width - tooltipContentBound.width : 0)
|
||||
) : 0;
|
||||
|
||||
return originalPositionX + offsetX;
|
||||
// let offsetX = 0;
|
||||
// const horizontalAlignment = placement.indexOf('right') > -1 ? 'right' : (placement.indexOf('left') > -1 ? 'left' : 'center');
|
||||
// const originalPositionX = horizontalAlignment === 'right' ? hostBound.right : hostBound.left;
|
||||
|
||||
// if (['left', 'left-top', 'left-bottom'].includes(placement)) {
|
||||
// offsetX = 0 - tooltipBound.width - space;
|
||||
// } else if (['top', 'bottom'].includes(placement)) {
|
||||
// offsetX = (hostBound.width - tooltipBound.width) / 2;
|
||||
// } else if (['right', 'right-top', 'right-bottom'].includes(placement)) {
|
||||
// offsetX = space;
|
||||
// } else if (['top-right', 'bottom-right'].includes(placement)) {
|
||||
// offsetX = 0 - tooltipBound.width;
|
||||
// } else if (['top-left', 'bottom-left'].includes(placement)) {
|
||||
// offsetX = 0;
|
||||
// } else {
|
||||
// return 0;
|
||||
// }
|
||||
|
||||
return originalPositionX + offsetX + offsetAlignment;
|
||||
}
|
||||
|
||||
function calculateTooltipRightPosition(placement: TooltipPlacement, hostBound: DOMRect, tooltipBound: DOMRect, arrowBound: DOMRect) {
|
||||
|
|
|
@ -8,5 +8,5 @@ const tooltipProps = { placement: 'bottom' };
|
|||
<template>
|
||||
<Tooltip> </Tooltip>
|
||||
|
||||
<Button v-tooltip="{ placement: 'left' }"> 显示提示信息 </Button>
|
||||
<Button v-tooltip="{ placement: 'right' }"> 显示提示信息 </Button>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue