fix: the inaccuracy in height retrieval

Author: Zerone

src/components/picture.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
   import { computed, type VNodeRef, nextTick, ref } from 'vue';
-  import { addUnit, getPrefix } from '../utils';
+  import { addUnit, getPrefix, INSTANCE_KEY } from '../utils';
+  import type { El } from '../types';
 
   export interface PictureProps {
     icon?: string;
@@ -22,12 +23,39 @@
     iconShowText: true,
   });
 
+  const isElement = (node: El) => {
+    const ELEMENT_NODE_TYPE = 1;
+    return (
+      node.tagName !== 'HTML' &&
+      node.tagName !== 'BODY' &&
+      node.nodeType === ELEMENT_NODE_TYPE
+    );
+  };
+
+  const containerPositionReg = /relative|absolute|fixed/i;
+  const getContainer = (el: El) => {
+    let node = el;
+    while (node && isElement(node)) {
+      const { position } = getComputedStyle(node);
+      if (
+        node[INSTANCE_KEY] ||
+        (containerPositionReg.test(position) && node !== el.parentNode)
+      ) {
+        return node;
+      }
+      node = node.parentNode as El;
+    }
+  };
+
   const formatShowIcon = ref(false);
   const root: VNodeRef = async (el) => {
     if (!el) return;
     await nextTick();
+    // 修复高度获取不准问题
+    const container = getContainer(el as El);
+    if (!container) return;
     formatShowIcon.value =
-      parseInt(getComputedStyle(el as Element).height, 10) > 100;
+      parseInt(getComputedStyle(container).height, 10) > 120;
   };
 
   const svgCommon = `<defs><linearGradient id="be595b27-5838-4fa8-9b74-d90d46f5bb3e" x1="80" y1="-1063.51" x2="80" y2="-1082.94" gradientTransform="matrix(1, 0, 0, -1, 0, -922.94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e8e8e8"/><stop offset="0.6" stop-color="#f8f8f8" stop-opacity="0.5"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs><path d="M152.29,160c0-5.36-32.38-19.43-72.29-19.43S7.71,154.64,7.71,160Z" fill="url(#be595b27-5838-4fa8-9b74-d90d46f5bb3e)"/>`;

src/core.ts

@@ -10,20 +10,12 @@ import {
   toRaw,
 } from 'vue';
 import VueDefaultPage, { type Props } from './components/index.vue';
-import type { DirectiveOptions, Name, Value, CamelName } from './types';
+import type { DirectiveOptions, Name, Value, CamelName, El } from './types';
 import './style/index.less';
-import { getPrefix } from './utils';
-
-const INSTANCE_KEY = Symbol(getPrefix());
+import { getPrefix, INSTANCE_KEY } from './utils';
 
 export const publicPropsKeys = ['zIndex', 'background'] as const;
 
-interface El extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    props: Props;
-    unmount(): void;
-  };
-}
 interface InstanceOptions<T extends Name> {
   name: T;
   options?: DirectiveOptions<T>;

src/types/index.ts

@@ -1,3 +1,5 @@
+import { INSTANCE_KEY } from 'src/utils';
+
 import type {
   EmptyProps,
   ErrorProps,
@@ -46,3 +48,10 @@ export type DirectiveOptions<T extends Name> = (T extends 'loading'
 export type Options = {
   [N in CamelName]?: (DirectiveOptions<N> & { enable?: boolean }) | boolean;
 } & PublicOptions;
+
+export interface El extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    props: Props;
+    unmount(): void;
+  };
+}

src/utils/index.ts

@@ -15,3 +15,5 @@ export function getPrefix(string = '', chars = '-') {
     .filter((item) => item)
     .join(chars);
 }
+
+export const INSTANCE_KEY = Symbol(getPrefix());