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 rectifyGutter = 20;
const rectifyGutter = 6;
const { scrollLeft, scrollTop } = document.documentElement;
@ -27,9 +27,9 @@ export function useTooltipPosition(
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 {
const revertDirection: RectDirection = revertDirectionMap.get(direction) || direction;
@ -171,12 +171,12 @@ export function useTooltipPosition(
// 横向参照
if (rectifyReferenceH.value) {
const rectifyReferenceHEl = getRectifyReferenceElement(rectifyReferenceH.value);
({ left, right, x, width } = rectifyReferenceHEl.getBoundingClientRect().right);
({ left, right, x, width } = rectifyReferenceHEl.getBoundingClientRect());
}
// 纵向参照
if (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;
}

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

@ -22,6 +22,8 @@ export const tooltipProps = {
reference: {
type: Object as PropType<HTMLElement>,
require: true,
}
},
referenceH: { type: String, defatul: "" },
referenceV: { type: String, defatul: "" },
};
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>
<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>