testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(tooltip): use placement and alignment to calculate x position of tooltip

This commit is contained in:
Sagi 2022-10-15 10:40:28 +08:00
parent d544bd7f5b
commit 114b48bba2
2 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
View File

@ -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) {

2
packages/ui-vue/src/components/tooltip.vue
View File

@ -8,5 +8,5 @@ const tooltipProps = { placement: 'bottom' };
<template>
<Tooltip> </Tooltip>
<Button v-tooltip="{ placement: 'left' }"> 显示提示信息 </Button>
<Button v-tooltip="{ placement: 'right' }"> 显示提示信息 </Button>
</template>