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

fix(tooltip): fix auto adapt popup direction

This commit is contained in:
Sagi 2022-10-14 14:20:13 +08:00
parent 64fba0d1bb
commit a26a610e4e
3 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -216,15 +216,15 @@ export function useTooltipPosition(
}
const tooltipPlacement = computed<TooltipPlacement>(() => {
// const rectifyPlacement = autoRectifyDirection(placement.value, hostBound, hostBound, tooltipBound, arrowBound);
return placement.value;
});
const tooltipPosition = computed<RectPosition>(() => {
const referenceBound = getReferenceBound();
placement.value = autoRectifyDirection(placement.value, referenceBound, hostBound, tooltipBound, arrowBound);
const originalTop = calculateTooltipTopPositoin(placement.value, hostBound, tooltipBound, arrowBound);
const originalLeft = calculateTooltipLeftPosition(placement.value, hostBound, tooltipBound, arrowBound);
const originalRight = calculateTooltipRightPosition(placement.value, hostBound, tooltipBound, arrowBound);
const referenceBound = getReferenceBound();
const { top, left, right } = tryFixOverBound(
placement.value,
{ top: originalTop, left: originalLeft, right: originalRight },

7
packages/ui-vue/components/tooltip/src/tooltip.component.tsx
View File

@ -64,13 +64,12 @@ export default defineComponent({
tooltipRef.value.getBoundingClientRect(),
arrowRef.value.getBoundingClientRect()
);
placement.value = tooltipPlacement.value;
arrowLeftPosition.value = `${arrowPosition.value.left}px`;
arrowTopPosition.value = `${arrowPosition.value.top}px`;
tooltipLeftPosition.value = `${tooltipPosition.value.left}px`;
tooltipRightPosition.value = `${tooltipPosition.value.right}px`;
tooltipTopPosition.value = `${tooltipPosition.value.top}px`;
arrowLeftPosition.value = `${arrowPosition.value.left}px`;
arrowTopPosition.value = `${arrowPosition.value.top}px`;
placement.value = tooltipPlacement.value;
}
});

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: 'bottom' }"> 显示提示信息 </Button>
<Button v-tooltip="{ placement: 'right' }"> 显示提示信息 </Button>
</template>