fix(components): affix width decimal points are ignored

chizukicn · Nov 8, 2023 · 0239943 · 0239943
1 parent 4f5d03d
commit 0239943
Showing 1 changed file with 6 additions and 12 deletions.
diff --git 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<HTMLElement | null>(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<Element | null | undefined>) {
   provide(AFFIX_TARGET_KEY, target);
 }
-
-export function useAffixTargetProvider<E extends Element = Element>() {
-  const targetRef = ref<E | null>(null);
-  provideAffixTarget(targetRef);
-  return targetRef;
-}