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

fix(tooltip): fix calculate overband size

This commit is contained in:
Sagi 2022-10-15 15:38:01 +08:00
parent 114b48bba2
commit f10e8b849d
3 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ export function useTooltipPosition(
const space = 6; const space = 6;
const rectifyGutter = 20; const rectifyGutter = 6;
const { scrollLeft, scrollTop } = document.documentElement; const { scrollLeft, scrollTop } = document.documentElement;
@ -27,9 +27,9 @@ export function useTooltipPosition(
const placementAndAlignment = ref(props.placement); const placementAndAlignment = ref(props.placement);
const rectifyReferenceH = ref(''); const rectifyReferenceH = ref(props.referenceH);
const rectifyReferenceV = ref(''); const rectifyReferenceV = ref(props.referenceV);
function revertPlacement(placement: string, direction: RectDirection): TooltipPlacement { function revertPlacement(placement: string, direction: RectDirection): TooltipPlacement {
const revertDirection: RectDirection = revertDirectionMap.get(direction) || direction; const revertDirection: RectDirection = revertDirectionMap.get(direction) || direction;
@ -171,12 +171,12 @@ export function useTooltipPosition(
// 横向参照 // 横向参照
if (rectifyReferenceH.value) { if (rectifyReferenceH.value) {
const rectifyReferenceHEl = getRectifyReferenceElement(rectifyReferenceH.value); const rectifyReferenceHEl = getRectifyReferenceElement(rectifyReferenceH.value);
({ left, right, x, width } = rectifyReferenceHEl.getBoundingClientRect().right); ({ left, right, x, width } = rectifyReferenceHEl.getBoundingClientRect());
} }
// 纵向参照 // 纵向参照
if (rectifyReferenceV.value) { if (rectifyReferenceV.value) {
const rectifyReferenceVEl = getRectifyReferenceElement(rectifyReferenceV.value); const rectifyReferenceVEl = getRectifyReferenceElement(rectifyReferenceV.value);
({ bottom, top, y, height } = rectifyReferenceVEl.getBoundingClientRect().bottom); ({ bottom, top, y, height } = rectifyReferenceVEl.getBoundingClientRect());
} }
return { top, left, right, bottom, height, width, x, y } as DOMRect; return { top, left, right, bottom, height, width, x, y } as DOMRect;
} }

4
packages/ui-vue/components/tooltip/src/tooltip.props.ts
View File

@ -22,6 +22,8 @@ export const tooltipProps = {
reference: { reference: {
type: Object as PropType<HTMLElement>, type: Object as PropType<HTMLElement>,
require: true, require: true,
} },
referenceH: { type: String, defatul: "" },
referenceV: { type: String, defatul: "" },
}; };
export type TooltipProps = ExtractPropTypes<typeof tooltipProps>; export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;

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

@ -8,5 +8,14 @@ const tooltipProps = { placement: 'bottom' };
<template> <template>
<Tooltip> </Tooltip> <Tooltip> </Tooltip>
<Button v-tooltip="{ placement: 'right' }"> 显示提示信息 </Button> <Button v-tooltip="{ placement: 'top-right' }"> 显示提示信息 </Button>
<div id="tooltipContainer" style="width: 200px; height: 200px; background: antiquewhite; display: flex">
<Button
style="margin: auto 0 auto auto"
v-tooltip="{ placement: 'top-left', referenceV: '#tooltipContainer', referenceH: '#tooltipContainer' }"
>
显示提示信息
</Button>
</div>
</template> </template>