fix(components): affix cant use target selector

chizukicn · Nov 8, 2023 · d928135 · d928135
1 parent db4fe8d
commit d928135
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/packages/core/src/affix/index.ts b/packages/core/src/affix/index.ts
@@ -3,7 +3,7 @@ import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from "vue";
 import { toReactive, useElementBounding, useElementVisibility, useEventListener } from "@vueuse/core";
 import type { CSSProperties } from "tslx";
 import { defineHookComponent, defineHookEmits, defineHookProps, isWindow, throttleByRaf, useElement } from "@hoci/shared";
-
+import { px } from "tslx";
 export const affixProps = defineHookProps(
   {
     fixedClass: {
@@ -96,8 +96,8 @@ export const useAffix = defineHookComponent({
       let newIsFixed = false;
       let newFixedStyles = {};
       const newPlaceholderStyles: CSSProperties = {
-        width: `${wrapperRect.width}px`,
-        height: `${wrapperRect.height}px`
+        width: px(wrapperRect.width),
+        height: px(wrapperRect.height)
       };
 
       const offset = props.offset;
@@ -108,17 +108,15 @@ export const useAffix = defineHookComponent({
           ? {
               position: "fixed",
               zIndex: props.zIndex,
-              top: `${targetRect.top + (offset || 0)}px`
+              top: px(targetRect.top + offset)
             }
           : {};
       } else {
-        newIsFixed = targetRect.bottom - wrapperRect.bottom < (offset || 0);
+        newIsFixed = (targetRect.bottom - wrapperRect.bottom) < offset;
         newFixedStyles = newIsFixed
           ? {
               position: "fixed",
-              bottom: `${
-                window.innerHeight - targetRect.bottom + (offset || 0)
-              }px`
+              bottom: px(window.innerHeight - targetRect.bottom + offset)
             }
           : {};
       }

diff --git a/packages/shared/src/composables/element.ts b/packages/shared/src/composables/element.ts
@@ -8,20 +8,15 @@ export function useElement<E extends Element = HTMLElement>(elementSelector: May
   const defaultRef = toRef(defaultValue);
   const isMounted = useMounted();
 
-
   const el = computed(() => {
     const selector = selectorRef.value;
-    if (selector) {
-      if (typeof selector === "string") {
-        if (isMounted.value) {
-          return document.querySelector<E>(selector) ?? null;
-        }
-        return null;
+    if (typeof selector === "string") {
+      if (isMounted.value) {
+        return document.querySelector<E>(selector) ?? null;
       }
-
-      return selector as E;
+      return null;
     }
-    return null;
+    return selector as E;
   });
 
   return computed(() => el.value ?? defaultRef.value);