diff --git a/packages/core/src/affix/index.ts b/packages/core/src/affix/index.ts index ca27dd6..2438397 100644 --- a/packages/core/src/affix/index.ts +++ b/packages/core/src/affix/index.ts @@ -1,6 +1,6 @@ import { computed, inject, provide, ref, watchPostEffect } from "vue"; import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from "vue"; -import { useElementVisibility, useEventListener } from "@vueuse/core"; +import { toReactive, useElementBounding, useElementVisibility, useEventListener } from "@vueuse/core"; import type { CSSProperties } from "tslx"; import { defineHookComponent, defineHookEmits, defineHookProps, isWindow, throttleByRaf, useElement } from "@hoci/shared"; @@ -63,7 +63,9 @@ export const useAffix = defineHookComponent({ setup(props, { emit }) { const wrapperRef = ref(null); - const parentRef = inject(AFFIX_TARGET_KEY, null); + const wrapperRect = toReactive(useElementBounding(wrapperRef)); + + const parentRef = inject(AFFIX_TARGET_KEY, undefined); const targetRef = useElement(props.target, parentRef); @@ -88,14 +90,12 @@ export const useAffix = defineHookComponent({ if (!wrapperRef.value || !containerRef.value) { return; } - - const wrapperRect = wrapperRef.value.getBoundingClientRect(); const targetRect = getTargetRect(containerRef.value); let newIsFixed = false; let newFixedStyles = {}; const newPlaceholderStyles: CSSProperties = { - width: `${wrapperRef.value.offsetWidth}px`, - height: `${wrapperRef.value.offsetHeight}px` + width: `${wrapperRect.width}px`, + height: `${wrapperRect.height}px` }; const offset = props.offset; @@ -164,9 +164,3 @@ export const useAffix = defineHookComponent({ export function provideAffixTarget(target: MaybeRefOrGetter) { provide(AFFIX_TARGET_KEY, target); } - -export function useAffixTargetProvider() { - const targetRef = ref(null); - provideAffixTarget(targetRef); - return targetRef; -}